Question

Stuck with a weird issue.. 🙁 I am fading in divs based on user clicks, it all works out fine, but When the user switches between the links in a faster pace, I end up having overlapped divs. Can anybody share me leads on how to tackle this issue.. The jsFiddle is as follows

jsFiddle Link

Answer 1

You can set a flag to abort further clicks until the animation is complete:

$(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} );
    });

    });
});