我可以在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中我可以使用这个sans超时调用:

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

Answer 3

我总是借助 coresetTimeout和clearTimeoutjs 函数来管理这类事情。

这是jsFiddle 上的示例

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