jquery add delay to animation
I am trying to add a delay to my Jquery so that once the mouse leaves my div id=test it will wait 3000 ms before closing back up. It doesnt seem to be working however?
I am using Jquery 1.6.min
Thank you in advance for your help and code snippets
$("#test").hover(function() {
$(this).css({'z-index' : '10'});
$(this).addClass("hover").stop()
.animate({
开发者_JAVA百科 height: '60px'
}, 1500);
} , function() {
$(this).css({'z-index' : '0'});
$(this).delay(3000);
$(this).removeClass("hover").stop()
.animate({
height: '20px'
}, 1500);
});
I think you need to just chain the calls together in the second block, or they run asynchronously :
$("#test").hover(function() {
$(this).css({'z-index' : '10'});
$(this).addClass("hover").stop()
.animate({
height: '60px'
}, 1500);
} , function() {
$(this).css({'z-index' : '0'})
.delay(3000)
.removeClass("hover")
.stop()
.animate({
height: '20px'
}, 1500);
});
wild guess is that you should be using chaining in order to make delay effective
alternatively, in "leave handler", you could use something like this:
function(){ setTimeout(function(){ .. perform what you need}, 3000);}
You had .delay in the wrong spot. Here is the documentation: http://api.jquery.com/delay/
You should have used the code:
$(this).removeClass("hover").stop().delay(3000)
.animate({
height: '20px'
}, 1500);
And here is my example: http://jsfiddle.net/MarkKramer/7NrPA/3/
精彩评论