javascript - 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;
});