我可以在 jQuery 中将 .delay() 与 .animate() 一起使用吗？

Question

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

下面是我用来为篮子设置动画的代码：

$('.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})
});

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

Answer 2

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

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

Answer 3

我一直在核心

setTimeout

和

clearTimeout

js 函数的帮助下管理此类事情。

这是 jsFiddle 上的 示例

也看看 jquery.hoverIntent 插件，它为您提供了悬停和退出事件的超时时间

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