我可以在 jQuery 中使用 .delay() 和 .animate() 吗？答案

【问题标题】：Can I use .delay() together with .animate() in jQuery?我可以在 jQuery 中使用 .delay() 和 .animate() 吗？
【发布时间】：2011-05-13 23:07:25
【问题描述】：

我有这段代码，它会在我正在开发的网站上滑动打开购物篮预览。如果用户悬停在它上面，它会保持打开状态，但我希望它在触发我的悬停回调之前有两秒钟的延迟。这是为了防止用户不希望鼠标离开篮子区域。

下面是我用来为篮子制作动画的代码：

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

这是我尝试使用但没有影响的代码：

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});

【问题讨论】：

版本 1.4.2。什么都没有发生，没有任何延迟，我会将我尝试使用的代码添加到我的问题中。
可能重复...stackoverflow.com/questions/1089246/…

标签： jquery jquery-animate delay

【解决方案1】：

如果您在延迟之前添加停止，它就可以正常工作：

$('.cart_button, .cart_module').hover(function() {
    $('.cart_module').stop(true, true).delay(100).animate({top:'39px'}, 400);
  },
  function() {
    $('.cart_module').stop(true, true).animate({top: -cartHeight}, 250);
});

【讨论】：

【解决方案2】：

看起来自 2011 年以来可能已经对 jQuery 进行了更新。在 Chrome 中，我可以使用这个无超时调用：

$('.thing').hover(function(){
    $(".thing").delay(2000).animate({top:'39px'},{duration:500});
}

【讨论】：

$('.thing').delay(2000).animate({top:'39px'}, 500);（略短的版本）

【解决方案3】：

我一直在核心 setTimeout 和 clearTimeout js 函数的帮助下处理这类事情。

这是example on jsFiddle

也可以查看jquery.hoverIntent plugin，它会为您提供悬停和退出事件的超时时间

【讨论】：

【解决方案4】：

你希望它延迟多久？？？？

$('.cart_button, .cart_module').hover(function(){
            $(".cart_module").delay(2000).animate({top:'39px'},{duration:500}); //two seconds
        }, function(){
            $('.cart_module').delay(2000).animate({top: -cartHeight},{duration:500}) //two seconds 
    });

【讨论】：

我忘了输入延迟时间，但设置时间仍然没有区别。