Comment éviter que JQuery ne file (chaînage)

Question

Scénario: Vous pouvez cliquer sur un bouton et certains contenus seront déplacés (.animés) vers la gauche. Lorsque vous cliquez sur le bouton rapidement pendant environ 3 fois, alors JQuery ques 3 .anime gauche dans l'ordre.

Je ne veux pas ça! Je vais empêcher ce que le bouton ne fonctionne que lorsque l'animation est terminée. Merci pour chaque clou!

Pseudo Code:

SI #Content n'est pas animé (stands encore)

ALORS sur CLICK

Animer Contet CSS "gauche" + 900px

SINON Vous ne pouvez pas cliquer sur le bouton maintenant. Mais si vous cliquez sur le bouton, alors il ne veut pas qu'une autre animation.

Answer 1

Vous pouvez utiliser the :animated selector pour exécuter du code en fonction de l'état animé d'un élément.

if($('#Content').is(':not(:animated)')) { 
    // run your animation 
} 

Il utilise également the :not() selector et the .is() method pour retourner un booléen.

Ou vous pouvez ajouter une classe au bouton au démarrage de l'animation et utiliser cette classe comme indicateur pour déterminer si l'animation doit s'exécuter.

La classe peut également styler le bouton pour indiquer qu'il ne doit pas être cliqué de nouveau.

$('#myButton').click(function() { 
    $button = $(this); 
    if(!$button.hasClass('disabled')) { 
     $button.addClass('disabled'); 
     $('#Content').animate({left: '+=900'}, function() { $button.removeClass('disabled') }); 
    } 
}); 

Answer 2

Vous pouvez toujours unbind l'événement click lorsqu'il est enfoncé. Passez ensuite un rappel à animate qui liera de nouveau click une fois l'animation terminée.