Question

我在父div中有一个div，通常是隐藏的。当您将鼠标悬停在父div上时，子项将可见。我正在使用JQuery .toggle（）来获得此效果。问题是如果你的MouseIn和MouseOut真的很快，反复超过父节点，那么子div会多次切换。有没有办法防止这种情况发生，这会减慢我的页面速度？

JSFIDDLE：http://jsfiddle.net/vY59g/1/

我的JQuery：

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").toggle("slow");
    });
});

Answer 1

这是因为动画的排队性质，每个鼠标输入和鼠标离开操作都会对切换操作进行排队。因此，如果鼠标快速移动触发进入和离开事件，那么即使在事件结束后，动画也会继续发生。

解决方法是在使用.stop()

调用切换之前停止并清除之前的动画

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true, true).toggle("slow");
    });
});

演示：Fiddle

Answer 2

如果你想让事情变得更好，只需将div：.result-user-facts放入变量中（如果只有一个变量）。像这样：

$(function (){
    var container = $(".result");
    var item = container.find(".result-user-facts").eq(0);
    $(".result").hover(function (){
        item.stop().toggle("slow");
    });
});

Answer 3

使用.stop(true,true)

停止匹配元素上当前正在运行的动画。

Fiddle DEMO

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true,true).toggle("slow");
    });
});

JQuery效果继续迭代

3 个答案: