jQuery – 当点击元素太快时，动画就会出错

我一直在研究这个jQuery效果inheritance人的小提琴： http ： //jsfiddle.net/abtPH/26/

到目前为止，一切都很不错，但是当我点击元素太快时，它似乎变得越来越怪并且变得奇怪。 如果你花时间点击元素就可以了。

我尝试过使用:animate

在用户点击下一个动画之前确保动画结束的东西。 我不喜欢这种方法，因为从最终用户来看，效果似乎是滞后的。 我希望用户能够快速点击元素并获得所需的效果。

到目前为止，这是我的jQuery：

 $('li').on('click', function (e) { e.preventDefault(); var active = $(this).siblings('.active'); var posTop = ($(this).position()).top; if (active.length > 0) { var activeTop = (active.position()).top; if (activeTop == posTop) { $(this).find('.outer').fadeIn('medium', function () { active.toggleClass('active', 400).find('.outer').fadeOut('medium'); }); } else { $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle(); $(this).find('.outer').slideToggle(); } } else { $(this).find('.outer').slideToggle(); } $(this).toggleClass('active', 400); }); $('.outer').on('click', function (e) { return false; }); 

Answer 1

在开始新动画之前，使用.finish（）完成所有排队的动画

 $('li').on('click', function(e){ e.preventDefault(); var active = $(this).siblings('.active'); var posTop = ($(this).position()).top; if (active.length > 0) { var activeTop = (active.position()).top; if (activeTop == posTop) { $(this).find('.outer').finish().fadeIn('medium', function(){ active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium'); }); } else { $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle(); $(this).find('.outer').finish().slideToggle(); } } else { $(this).find('.outer').finish().slideToggle(); } $(this).finish().toggleClass('active', 400); }); $('.outer').on('click', function(e){ return false; }); 

演示： 小提琴