Question

Scenario: You can click a Button and some Content will move (.animate) left.
When you click the button fast for about 3 times then JQuery ques 3 .animate left’s in the order.

I dont want that! I will prevent that queing so the button will only work when the animation is done.
Thank you for every clou!

Pseudo Code:

IF #Content is NOT animated (stands still)

THEN On Click Button

Animate Contet CSS “left” + 900px

ELSE You can’t click the button now. But ff you click the butto,n then it wont que another animation.

Answer 1

You can use the :animated selector to run code based on the animated state of an element.

if( $('#Content').is(':not(:animated)') ) {
    // run your animation
}

This also uses the :not() selector, and the .is() method to return a boolean.

Or you could add a class to the button when the animation starts, and use that class as a flag to determine if the animation should run.

The class could also style the button to give feedback that it shouldn’t be clicked again.

$('#myButton').click(function() {
    $button = $(this);
    if( !$button.hasClass( 'disabled' ) ) {
        $button.addClass( 'disabled' );
        $('#Content').animate({left: '+=900'}, function() { $button.removeClass('disabled') });
    }
});