How with JQuery to disable click until animation done

You may want to animate something before doing an action and remove the possibility to the user the press again. This is often a desired behavior because it might broke the current animation or simply doing nothing which will lead the user in a false impression of bug.

The solution is to disable the button (or link) during the animation.

function clickFunction(obj) {
    //If animated than we wait the animation to be over
    if ($(':animated').length) {
        return false;

            //Animation here that is executed one but if clicked before
            //this one is over won't be reached
            }, 4000);

The above code work with JQuery framework and check if the animated queue contain any element. If yes, the function called by the click return false and doesn’t do anything. In fact, you could here write something to the screen if you want to inform the user that something is occurring and that he should wait.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.