Geek asks and answers

Disconnect link temporarily when clicked?

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

I don’t think I need to publish the code, but just ask if you think what you need.

My link looks like this:

<a href="button">Click</a>
+3
source share
4 answers

Yes, you can do it absolutely.

preventDefault(), , . preventDefault jQuery. , . .

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; , preventDefault , , DOM.

+7

one, , :

$('#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);   
});

: http://jsfiddle.net/redler/8sGqK/

+2

If you do not 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 take a look at the effects API and method .stop()to capture your animation becoming clumsy: http://api.jquery.com/category/effects/

+1
source

Without using global variables or timeOuts, you can use 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);

Sample jsfiddle code .

+1
source

More articles:


All Articles