jquery - 我的 jquery 函数执行了很多时间而不是一个

Question

当我将鼠标移到 .test 上时，我希望 .hide 显示，当我将鼠标移出 .test 时，我希望 .hide 隐藏

不幸的是，它显示并隐藏了不止一次。

我的代码是：

.hide{
    opacity: 0;
    filter: "old-ie-staff";
}

$(document).on('mouseover', '.test', function () {
    $(this).find('.hide').animate({opacity: 1},300);
}).on('mouseout', function() {
    $(this).find('.hide').animate({opacity: 0},300);
});

这里有一个小提琴链接：http: //jsfiddle.net/malamine_kebe/2bnZW/

Answer 1

mouseover执行或mouseout在元素上时，多个动画序列将排队。jQuery 提供了一种方法来停止这些动画并将它们从动画队列中移除。

在将.stop(true)之前添加.animate()

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

该true参数还将删除任何已排队的动画 - 请参阅防止动画队列建立

Answer 2

您只需要使用stop()来清除排队的动画；

$(document).on('mouseover', '.test', function () {
    $(this).find('.hide').stop(true).animate({opacity: 1},300);
}).on('mouseout', function() {
    $(this).find('.hide').stop(true).animate({opacity: 0},300);
})