Comment exécuter une animation de manière séquentielle * une seule fois * après une animation sur un groupe (par exemple des frères et soeurs)

Voici mon dilemme. J'ai 2 animations qui doivent fonctionner séquentiellement.Comment exécuter une animation de manière séquentielle * une seule fois * après une animation sur un groupe (par exemple des frères et soeurs)

La première animation s'exécute sur un groupe d'éléments acquis via la fonction siblings() de jQuery.

La deuxième animation s'exécute sur un seul élément. (Celui sur lequel siblings() a été appelé.) Cela doit avoir lieu après la fin de la première animation.

Si je n'utilise pas queue() ou un rappel après la première animation, ils s'exécutent simultanément.

Si j'utilise queue() ou un rappel après le premier, alors la deuxième animation finit par s'exécuter plusieurs fois (une fois pour chacun des frères et soeurs).

Alors, comment mettre en file d'attente avec succès une animation à exécuter une fois après une animation de groupe?

(j'ai trouvé un hack qui fonctionne, mais j'espère qu'il ya une bonne façon d'y arriver.)

Exemple simplifié:

<html> 
<head> 
<title>tester page</title> 
<style> 
<!-- 
.fadebutton, .resizebutton { 
cursor: pointer; 
color: white; 
margin: 10px 0 10px 0; 
background: blue; 
padding: 2px; 
display: table; 
} 
.box { 
width: 100px; 
height: 100px; 
background: orange; 
margin: 10px; 
float: left; 
} 
--> 
</style> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.3.2");</script> 
<script type="text/javascript"> 
$('document').ready(function() { 
$('.resizebutton').toggle( function() { $(this).parent().animate({width: '+=50px', height: '+=50px'}, 1000); }, 
     function() { $(this).parent().animate({width: '-=50px', height: '-=50px'}, 1000); }); 
$('.fadebutton').click(function() { 
var $theBox = $(this).parent(); 
$theBox.siblings().fadeOut(1000, function() { $theBox.find('.resizebutton').click(); }); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div> 
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div> 
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div> 
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div> 
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div> 
</div> 
<div> 
<div style="clear: both; padding: 0 0 10px 0; ">Clicking the 'resize' button triggers a toggle that increase or decreases the box's size.</div> 
<div>Clicking on the 'fade' button fades the box's siblings, then triggers the 'resize' button in that box. Trouble is that the 'resize' gets fired as many times as there are siblings.</div> 
</div> 
</body> 
</html>

Source

2009-11-11 user113716

Est-ce que votre hack ressemble à quelque chose comme ça?

$('.fadebutton').click(
function() 
{ 
var $theBox = $(this).parent(); 
var doneOnce = false; 
$theBox.siblings() 
     .fadeOut(1000, 
      function() 
      { 
        if(!doneOnce) 
        { 
        doneOnce = true; 
        $theBox.find('.resizebutton').click(); 
        } 
      } 
);

Here est le code de travail.

Source

2009-11-11 03:04:09

Ah, ça a l'air mieux que le mien. Le mien était simplement d'avoir une animation qui ne fait essentiellement rien de parallèle aux animations de siblings(). Donc, j'ai été capable de faire le rappel de cette animation unique. J'aime mieux le tien. Donc, il semble que ce soit un défaut (mineur) de jQuery, qui est corrigé uniquement via des hacks comme celui que vous avez donné. Pas un gros problème, je suppose. Merci pour l'aide! – user113716

Eh, Si j'allais étendre la fonction '$ .animate()' pour ajouter un drapeau à jouer une fois, je l'implémenterais probablement de la même manière. –

Salut! J'ai remarqué que c'est une question assez ancienne et je suis confronté au même problème ici. Y a-t-il un moyen "correct" de faire cela comme maintenant? Je n'arrive pas à trouver quoi que ce soit à ce sujet. – Danita

Vous devriez être en mesure de déclencher la deuxième animation en passant un rappel à la première animation afin que vous soyez averti qu'elle se termine.

Source

2009-11-11 02:23:42

À moins que je ne vous comprenne mal, j'ai indiqué dans ma question que cela faisait que le rappel s'exécutait plusieurs fois (une fois pour chaque frère). Je veux qu'il ne fonctionne qu'une seule fois. Mon exemple a un rappel qui s'exécute plusieurs fois au lieu d'une fois. Était-ce ce que vous vouliez dire par «passer un rappel à la première animation»? – user113716

Comment exécuter une animation de manière séquentielle * une seule fois * après une animation sur un groupe (par exemple des frères et soeurs)

Répondre

Questions connexes