jQuery - 当点击元素太快时动画会出错

Question

我一直在研究这个 jQuery 效果，这是小提琴： 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;
});

演示：Fiddle