jquery - jQuery效果不断迭代

Question

我在父 div 中有一个 div，通常是隐藏的。当您将鼠标悬停在父 div 上时，孩子就会可见。我正在使用 JQuery .toggle() 来获得这种效果。问题是，如果您的 MouseIn 和 MouseOut 非常快，反复在父级上方，则子 div 会切换很多次。有没有办法防止这种情况发生，它会减慢我的页面速度？

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

我的查询：

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

演示：小提琴

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)

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

小提琴演示

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