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

发布于 2024-10-03 10:17:59 字数 624 浏览 5 评论 0原文

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

下面是我用来对篮子进行动画处理的代码：

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

原文

I have this code, which slides open a basket preview on a website I am working on. It stays open if the user is hovered on it, but I want it to have a two second delay before the callback for my hover is triggered. This is just in case the user didn't want the mouse to leave the basket area.

Below is the code I am using to animate the basket:

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

Here is the code I tried to use, but had no affect:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2024-10-10 10:17:59

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

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

If you add the stop before the delay it works just fine:

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

回复收藏 0 原文

月亮是我掰弯的 2024-10-10 10:17:59

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

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

Looks like there may have been updates to jQuery in this vein since 2011. In Chrome I can use this sans timeout calls:

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

回复收藏 0 原文

不再让梦枯萎 2024-10-10 10:17:59

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

这是jsFiddle 的示例

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

回复收藏 0 原文

撩发小公举 2024-10-10 10:17:59

你想让它延迟多久？？？？

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

How long do you want it to delay for????

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

回复收藏 0 原文

~没有更多了~