CODEWITHSUNDEEP
jqueryjquery-uijquery-animate
Sullan
Sullan

Reputation: 1157

Overlapping Divs when using fadeIn out fadeOut animation

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

Upvotes: 0

Views: 512

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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

    });
});

Upvotes: 1

Related Questions