Question

我正在用jQuery编写一些代码。

有一些div与课程＆＃39; icon＆＃39;在我的HTML中，我隐藏了一个div与课程＆＃39;隐藏＆＃39;在每个＆＃39;图标旁边。

我希望当用户的鼠标进入＆＃39;图标时，相应的“隐藏”＃39;将制作动画。

但我发现如果我快速移动鼠标进出“图标”。动画将执行两次。它使我的网络视觉效果非常糟糕。

所以我想在制作动画时停止活动，我阅读了大量的文章和文档然后尝试，但仍然无法解决。

这是我的代码。

$(".icon").on("mouseenter", function(){
    $(this).closest(".slideli").find(".hide").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
    $(this).closest(".slideli").find(".hide").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});

Answer 1

您应该使用jQuery的.stop()来阻止新动画一直添加到队列中。您可以根据需要使用.stop(true,true)或.stop(true,false)：

如果您只想清除动画队列并让它自动完成动画，请使用.stop(true,false)
如果要清除动画队列并强制动画立即跳转到其结束状态，请使用.stop(true,true)

以下是您改进的代码：

$(".icon").on("mouseenter", function(){
    $(this)
    .closest(".slideli")
    .find(".hide")
    .stop(true,true)
    .show("slide", {direction: 'right'})
    .animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
    $(this)
    .closest(".slideli")
    .find(".hide")
    .stop(true,true)
    .hide("slide", {direction: 'right'})
    .animate({duration: 500, easing: "swing", queue: false});
});

您也可以使用.finish()，但由于您的动画非常简单（您在任何情况下都没有链接连续的动画），.stop()也可以执行相同的工作。

p / s：一篇关于处理我前一段时间发布的jQuery动画的快速文章的无耻插件：How to .stop() writing bad jQuery animations

Answer 2

为避免在动画元素上触发事件，您应该使用伪选择器:animated，如下所示：:not(:animated)

$(".icon").on("mouseenter", function(){
    $(this).closest(".slideli").find(".hide").filter(":not(:animated)").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
    $(this).closest(".slideli").find(".hide").filter(":not(:animated)").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});

jQuery在动画时停止侦听事件

2 个答案: