animer un seul élément à la fois

Question

J'anime cinq cases sur clic. Ils vont fondamentalement de haut en bas. Un seul objet ou une seule boîte devrait être animé à la fois. C'est bien, jusqu'à ce que vous cliquez plusieurs fois, plusieurs boîtes très rapidement, puis le comportement devient erratique.

j'ai créé un lien de démonstration ici http://jsfiddle.net/fLmt6/9/

Le code ci-dessous est responsable de l'animation de rebond

var itemActive = $(".items li.active");     

var indicator = 1;    

bounceItem(); 

function bounceItem() {   
    bounceInterval = setInterval(function() { 
     if (indicator === 1) { 
      indicator = -1; 
     } else { 
      indicator = 1; 
     } 
     $(".items li").not(".active").stop().css({ 
      top: "11px" 
     }); 
     itemActive.animate({ 
      top: "+=" + (indicator * 11) 
     }, 400); 

    }, 400); 
} 

Answer 1

1) Tout d'abord, déléguer l'événement à un élément parent. Ici, je vais utiliser le corps car je ne connais pas la structure de votre HTML plus large. La délégation d'événements est un bon conseil en général et présente plusieurs avantages, l'un étant que vous pouvez filtrer les éléments lorsque l'événement se déclenche, et non lorsqu'il est enregistré. Ce qui m'amène à ...

2) Ajouter un filtre qui ignore les clics sur les boîtes déjà animées.

changer Alors

var item = $(".items ul li a"); 
item.click(function() { 

à

$('body').on('click', '.items li:not(:animated) a', function() { 

Answer 2

Vous pouvez ajouter une nouvelle variable, qui va vérifier si l'élément a été animé. Vous devez l'animer deux fois - TOP, puis BOTTOM. Donc j'ai été édité votre code.

variable animated0 est réglé avant l'animation, puis mis à 1 lorsque le rebond de l'élément sur le dessus et ensuite mis à 2 quand il rebondir vers le bas, puis arrêter le rebondissement.

var item = $(".items ul li a"); 

item.click(function() { 

$(this).parent().siblings().removeClass("active"); 
$(this).parent().siblings().css({ 
    top: "11px" 
}); 

if (!$(this).parent().hasClass("active")) { 

    $(this).parent().fadeOut("fast", function() { 

     $(this).addClass("active").fadeIn("slow"); 

     var itemActive = $(".items li.active"); 
     var indicator = 1; 

     var animated = 0; 
     bounceItem(); 

     function bounceItem() { 
      bounceInterval = setInterval(function() { 
       if (indicator === 1) { 
        indicator = -1; 
       } else { 
        indicator = 1; 
       } 
       $(".items li").not(".active").stop().css({ 
        top: "11px" 
       }); 
       if(animated != 2) { 
        itemActive.animate({ 
         top: "+=" + (indicator * 11), 
         times: 1 
        }, 400); 
        animated += 1; 
       } 

      }, 400); 
     } 

    });   

    clearInterval(bounceInterval); 
} 

}); 

JSFiddle here