"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>

You could remove the `href` attribute, by putting it in to a `data-` attribute, then using a setTimeout, add it back. — Glen Solsberry, Mar 21 '11 at 16:42
Since you didn't post the code, I am not positive, but perhaps you could explore using stop() before you call the animation, so that the click doesn't keep adding new animations to the chain. That seems like the simplest solution if it works for your situation. — Jake, Mar 06 '12 at 12:13

score 7 · Accepted Answer · answered Mar 21 '11 at 16:43

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.

Ken Redler · Answer 2 · 2011-03-21T17:04:44.303

Here's a self-contained way to do it using one, which automatically unbinds the click handler after a single trigger, and a click function that rebinds itself:

$('#yourlink').one('click', function clicker(){ // name the function
    var that = this;
    event.preventDefault();
    do_your_stuff_here();
    var rebind = setTimeout(function() {
       $(that).one('click',clicker); // ...then rebind by name
    }, 2000);   
});

Here's a working example: http://jsfiddle.net/redler/8sGqK/

score 1 · Answer 3 · answered Mar 21 '11 at 16:44

If you don't want the link to work when you click it, you need to return false.

$('a').click(function(){
   if (doSomeCheck()) {
     //run animation
   } else {
      return false; //don't want the link to work
   }
});

However, I recommend you look at the effects API and the .stop() method to fix your animation getting wonky : http://api.jquery.com/category/effects/

score 1 · Answer 4 · answered Mar 21 '11 at 16:49

Without using global variables or timeOuts you could leverage the callback for your animation to reassign the function.

function DoTheAnimation(){
    var $a = $(this);
    var h = $("div").height() + 100;
    $("div").animate({'height': h}, "slow",function(){
     $a.one("click.animate", DoTheAnimation);
   });
}

$("a").click(function(event){event.preventDefault();}).one("click.animate", DoTheAnimation);

Code example on jsfiddle.

"Disable" a link temporarily when clicked?

4 Answers4

Linked