jQuery-Animation: Doppelklick ignorieren

Question

Ich habe eine einfache jQuery-Animation, die ein div nach einem .click() -Ereignis nach rechts oder links bewegt.

Wenn der Benutzer jedoch zweimal auf das Ereignis klickt, wird es zweimal ausgelöst, was die Formatierung beeinträchtigt.

Hier ist ein Beispiel dafür, was ich habe:

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

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

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

    } 
}); 

Die Funktion slide_button() prüft, ob die Position des div für den Benutzer Standpunkt innerhalb akzeptabler Grenzen liegt. Wenn dies der Fall ist, wird der rechte oder linke Knopf sichtbar sein. Wenn es außerhalb der Grenzen liegt, werden die Schaltflächen ausgeblendet.

Es funktioniert gut, außer wenn ich zweimal klicke - dann wird es nur von der Seite rutschen.

Gibt es eine Möglichkeit, damit Doppelklicks zu ignorieren?

Answer 1

Genau prüfen, ob Element bereits Animieren:

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

Answer 2

Sie könnten das Click-Ereignis geklickt einmal .unbind(), die es von der Ausführung mehrmals verhindern:

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

Sobald die Animation abgeschlossen Sie es erneut binden könnten, wenn Sie wieder klicken müssen in der Lage.

Answer 3

ich normalerweise dieses Problem umgehen, indem Sie eine globale Variable Einstellung und ein ausgeführt werden, wenn wie

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

Answer 4

Sie one() in jquery verwenden können:

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

Nachdem die Animation abgeschlossen ist, ist das Klickereignis an die li gebunden nk wieder und es kann höchstens einmal ausgeführt werden.