如何停止jQuery排队动画效果 [英] How to stop jQuery queuing animation effects

问题描述

我有一个简单的jQuery悬停动画:

I have a simple jQuery hover animation:

jQuery(function($) {
$('.category').hover(function(){
    $(this).find('.banner').fadeIn();
    },function(){
    $(this).find('.banner').fadeOut(400);
});
});

所有这些操作是当有人将鼠标悬停在.category元素上时，横幅div会淡入和淡出.很简单.

all this does is when someone hovers over the .category element, the banner div fades in and fades out. Simple.

我的问题是，由于我有大约十个.category元素，如果有人过快或过快地跨过它们，并且在同一时间多次移动jQuery，使动画排队并不断使它们出现，直到消失为止.

My problem is that as I have about ten of the .category elements, if someone moves across them too fast or off and on the same one multiple times jQuery queues the animations and keeps making them appear, disappear until it's caught up.

是否有一种简单的方法可以阻止这种情况的发生?

Is there a simple way to stop this from happening?

我看到了另一个建议在何处添加.stop的问题，但这不起作用.如果我反复移动鼠标太多次，动画将完全停止工作或仅淡入一半.

I saw another question where it was suggested to add .stop, but this doesn't work. the animation stops working completely or comes in only half faded in if I move the mouse over and off too many times.

预先感谢

推荐答案

您可以将fadeOut和fadeIn转换为使用.animate()，并带有停止动画排队的选项.

You can convert your fadeOut and fadeIn to use .animate() with options to stop animation queuing.

$('.category').hover(function() {
    $(this).find('.banner').show().animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $(this).find('.banner').animate({
        opacity: "hide"
    }, {
        queue: false,
        duration: 400
    });
});

jsfiddle上的代码示例

Code example on jsfiddle

这篇关于如何停止jQuery排队动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！