Question

I have this button that hides one div and shows another “on click”
below is pseudo code, but hopefully enough to explain the problem.

The problem is if the user presses the button before the slide and animate finishes (like presses it twice quickly) , it shows the old and the new div. somehow i need to disable the
click until the animation is complete

thanks for any help

$( '#edit-buttons' ).on("click", "div", function(event){

        $('#'+currentDiv).slideUp('fast', function() {
            $('#'+nextDiv).animate({ left: 'show', opacity: 'show' }, 'slow');
        });

});

Answer 1

You can use a boolean to block the function call.

var block = false;

$( '#edit-buttons' ).on("click", "div", function(event){
     if(!block){
        block = true;
        $('#'+currentDiv).slideUp('fast', function() {
            $('#'+nextDiv).animate({ left: 'show', opacity: 'show' }, 'slow',function(){
               block = false;
            });
        });
      }
});