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

我总是在核心setTimeout和clearTimeout js函数的帮助下管理这类事情。

这是example on jsFiddle

同时查看jquery.hoverIntent plugin，它会让您在悬停和结束事件时超时

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

我可以在jQuery中使用.delay（）和.animate（）吗？

4 个答案: