jQuery file d'attente sur l'ensemble correspondant

Question

J'essaie de déclencher une séquence d'effets (simple animation/masquage) sur un groupe d'images à l'intérieur de div où les images sont étiquetées avec des noms de classe qui fournissent une capacité de filtrage à travers les sélecteurs de classe.

<div id="myDiv"> 
    <img class="tag1 tag2 tag3" ... /> 
    <img class="tag2 tag3" ... /> 
    <img class="tag1 tag2" ... /> 
    ...more image tags... 
</div> 

Maintenant, je veux montrer les images correspondant à un tag comme:

$('#myDiv .tag1').hide('blind', {}, 300);  
$('#myDiv .tag2').show('blind', {}, 300); 

Où balise1 était l'ancienne balise active et tag2 est la nouvelle balise active. Je pensais que je pouvais juste laisser tomber la fonction show dans un rappel sur l'appel de la fonction hide, mais il finit par appeler la méthode show à plusieurs reprises (autant de fois qu'il y avait des éléments cachés dans le premier appel).

Est-ce que quelqu'un pourrait suggérer comment utiliser le rappel une seule fois sur le premier jeu correspondant, ou fournir une autre façon d'utiliser la file d'attente de jQuery pour les retirer en séquence? Le défi que je vois est que l'effet de spectacle n'a pas nécessairement d'impact sur les mêmes images qui ont été touchées avec l'effet de peau. Une chose que j'ai essayée était d'utiliser un élément facilitant où je pourrais attacher les effets (comme les assigner dans une file d'attente sur myDiv) mais je ne pourrais pas voir un moyen de faire que cela fonctionne correctement.

Merci!

Answer 1

Ce que je ferais est de faire une variable que vous pouvez stocker si le spectacle a été tiré, puis enveloppez l'appel pour le spectacle dans une vérification if. Quel que soit l'événement qui déclenche les peaux avant de les déclencher, réinitialisez cette variable. Cela devrait assurer que le spectacle ne tirera qu'une seule fois après les peaux.

var fired = false; 

function showhide() 
{ 
    fired=false; 
    $('#myDiv .tag1').hide('blind', function(){ 
    if(!fired) 
    { 
     fired=true; 
     $('#myDiv .tag2').show('blind', {}, 300); 
    } 
    }, 300); 
}