jQuery animation: Ignore double click

Question

I have a simple jQuery animation that moves a div to the right or left, upon a .click() event.

However, if the user clicks the event twice, it fires twice, which mes

Answer 1

I normally get around this by setting a global variable and run an if like

 clicked = true;
 $(div).click(function(){
   if (!clicked){
       clicked = true;
       Your function with a callback setting clicked to false
   }
   ....
 })

Answer 2

Just check if element is already animating:

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});    

Answer 3

You can use one() in jquery:

$('a#right').one("click", function () {
    slide($(this));
});

function slide(obj) {
    if (obj.is(':visible')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
            $('a#right').one("click", function () {
              slide($(this));
            }
        });
}

After the animation is completed, the click event is bound to the link again and it can be executed at most once.

Answer 4

You could .unbind() the click event once clicked which will prevent it from executing multiple times:

$('a#right').click(function () {
    $(this).unbind('click');
    ...
});

Once the animation completes you could rebind it if you need to be able to click again.