jquery add delay to animation

Question

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({
            height: '60px'
        }, 1500);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).delay(3000);
    $(this).removeClass("hover").stop() 
        .animate({
            height: '20px'
        }, 1500);
});

Answer 1

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);
});

Answer 2

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);}

Answer 3

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/