jquery - jquery为动画添加延迟

Question

我正在尝试向我的 Jquery 添加延迟，以便一旦鼠标离开我的 div id=test 它将等待 3000 毫秒，然后再关闭备份。但是它似乎不起作用？

我正在使用 Jquery 1.6.min

提前感谢您的帮助和代码片段

$("#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

我认为您只需在第二个块中将调用链接在一起，或者它们异步运行：

$("#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

疯狂的猜测是您应该使用链接以使延迟有效

或者，在“离开处理程序”中，您可以使用如下内容：

function(){ setTimeout(function(){ .. perform what you need}, 3000);}

Answer 3

您在错误的位置使用了 .delay。这是文档：http ://api.jquery.com/delay/

您应该使用以下代码：

$(this).removeClass("hover").stop().delay(3000) 
    .animate({
        height: '20px'
    }, 1500);

这是我的例子：http: //jsfiddle.net/MarkKramer/7NrPA/3/