javascript - jQuery - 当点击元素太快时动画会出现问题

Question

我一直在研究这个 jQuery 效果，下面是 fiddle : <强> 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