JQuery效果继续迭代

我在父div中有一个div，通常是隐藏的。当您将鼠标悬停在父div上时，子div将可见。我正在使用JQuery.toggle（）来获得这种效果。问题是，如果您在父对象上反复快速地执行MouseIn和MouseOut操作，那么子div就会切换很多次。有没有办法防止这种情况发生，因为它会减慢我的页面速度

JSFIDDLE：

我的JQuery：

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

使用

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

---

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

解决方案是在使用调用切换之前停止并清除以前的动画

---

演示：

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

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

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

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