I am trying to delay the adding of a class using jquery. All the code works fine but I would like to delay the .addClass('hideText')
until after the hover out function completes could someone show me how to do this please?
Here is the code:
$(document).ready(function() {
$('.listing div').addClass('hideText');
$('.listing div').hover(
function() {
$(this)
.stop(true)
.removeClass('hideText')
.animate(
{top: '0'},
{duration: 300, easing: 'linear', queue: false}
)
},
function() {
$(this)
.stop(true)
.animate(
{top: '150px'},
{duration: 300, easing: 'linear', queue: false}
)
.addClass('hideText')
});
});
Place the .addClass()
line in a callback:
$(document).ready(function() {
$('.listing div').addClass('hideText');
$('.listing div').hover(
function() {
$(this)
.stop(true)
.removeClass('hideText')
.animate(
{top: '0'},
{duration: 300, easing: 'linear', queue: false}
)
},
function() {
$(this)
.stop(true)
.animate(
{top: '150px'},
{duration: 300, easing: 'linear', queue: false},
function() {
$(this).addClass('hideText');
}
);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With