jquery - "Disable" a link temporarily when clicked?

Question

I have a link that when clicked, performs some animation functions to some divs etc and works very well. My problem is when I click the button more than once etc, the animation looks weird. I would like it so, that when my button is clicked, the button is "disabled" for say 2 seconds.

I don't think I need to post the code, but just ask if you think you need it.

My link is like so:

<a href="button">Click</a>

Answer 1

Yes, you can absolutely do this.

You add a click handler and use preventDefault() when the animation is running until it is complete. More about preventDefault is in the jQuery docs. You can use a flag or change your click handler after the first click to accomplish this. Here's an example with a flag.

var isAnimating = false;
$("#animationLink").click(function(e) {
    if(!isAnimating) {
        isAnimating = true;
        setTimeout("isAnimating = false", 2000); // set to false in 2 seconds
        // alternatively you could wait until your animation is done
        // call animation code
    } else {
        e.preventDefault();
    }
});

return false; from your click handler will have the same effect as preventDefault with the added action of preventing event bubbling up the DOM.