Перекрывающиеся Div при использовании fadeIn out fadeOut animation

Question

Застрял в странной проблеме .. :-( Я теряю в div'ах, основанных на щелчках пользователя, все работает нормально, но когда пользователь переключается между ссылками в более быстром темпе, я в конечном итоге получаю перекрывающиеся div. Кто-нибудь поделится со мной руководством о том, как решить эту проблему .. JsFiddle выглядит следующим образом

jsFiddle Link

Answer 1

Вы можете установить флаг, чтобы прервать дальнейшие клики до завершения анимации:

$(document).ready(function() {
    var running = 0
    $('.page-slide').click(function() {
        if(running==1) {
            return
        }
        running = 1
        var getId = $(this).attr('rel');

    $('.rightCol:visible').fadeOut( 'fast', function() {
        $('#'+ getId +'').fadeIn( 'slow',function(){running=0} );
    });

    });
});