如何停止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
});
});
Code example on jsfiddle
这篇关于如何停止jQuery排队动画效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!