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 messes up the formatting.

Here's an example of what I have:

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

The function slide_button() will check to see if the position of the div is within acceptable limits for the user's viewpoint. If so, it will allow the right or left button to be visible. If it is outside of the limits, it will hide the buttons.

It works well, except if I click it twice--then it will just slide right off the page.

Is there a way to work with this to ignore double clicks?

Answer 1

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 2

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 3

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
   }
   ....
 })