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