2010-01-30 15 views
8

J'essaye de faire un div fade in/out dans une instruction each. Le problème est que l'élément suivant est appelé avant la fin du fondu entrant/sortant.attente pour chaque jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 

<div id='one'>one</div> 
<div id='two'>two</div> 
<div id='three'>three</div> 

<script> 
$.each([ "one", "two", "three"], function() { 
    console.log('start - ' + this); 
    animate(this); 
    console.log('end - ' + this); 
}); 

function animate(id) 
{ 
    box = '#' + id; 

    $(box).fadeOut(500, function() 
    { 

    console.log('showing - ' + id); 
    $(box).fadeIn(500); 
    $(box).css('backgroundColor','white'); 

    }); 

} 
</script> 
console

montre -

start - one 
end - one 
start - two 
end - two 
start - three 
end - three 
showing - one 
showing - two 
showing - three 

je ne voudrais quelque chose comme -

start - one 
showing - one 
end - one 
start - two 
showing - two 
end - two 
start - three 
showing - three 
end - three 

Alors, comment puis-je attendre pour chaque chaque 'être complètement fini avant de passer à la prochaine valeur?

Répondre

7

Vous allez devoir utiliser des rappels - des fonctions qui sont exécutées lorsque la fonction en cours est terminée. Pour ce faire, avec .fadeOut vous feriez:

$('#element').fadeOut(400, myFunction); 

maFonction ne serait pas appelé jusqu'à ce que fadeOut a été achevée. Les appels AJAX avec $ .get peuvent également avoir des fonctions de rappel.

Voici un exemple qui fonctionne, même si je suis sûr qu'il ya une meilleure façon:

function animate(myArray, start_index) { 

    // Stealing this line from Sam, who posted below. 
    if(!start_index) start_index = 0; 

    next_index = start_index+1; 
    if(next_index > myArray.length) { return; } 

    box = '#' + myArray[start_index]; 
    $(box).fadeOut(500, function() { animate(myArray,next_index); }); 
} 

puis dans votre document.ready que vous appelez:

animate(theArray); 
1

On dirait que vous essayez de "faire défiler" une liste de divs. Avez-vous vérifié le jQuery Cycle plugin?

+0

, ceci est juste un exemple simple. Je pourrais vouloir faire des appels d'ajax avec les valeurs dans le tableau, appeler d'autres fonctions qui font d'autres choses, ou quelque chose d'autre. J'ai fait ce qui suit pour montrer un exemple simple de la façon dont chaque élément doit attendre que le précédent soit complètement terminé. – scott

1

Que diriez-vous cela, animer en passant par chaque élément du tableau dans la fonction?

var elements = [ "one", "two", "three"]; 
animate(elements); 

function animate(elements, index) 
{ 
    if(!index) index = 0; 
    var box = '#' + elements[index]; 
    var $$box = $("#box"); 
    console.log('start - ' + elements[index]); 
    $$box.fadeOut(500, function() 
    { 
     console.log('showing - ' + elements[index]); 
     $$box.fadeIn(500, function() { 
      console.log('end - ' + elements[index]); 
      if(elements[++index]) animate(elements, index); 
     }).css('backgroundColor','white'); 
    }); 
} 

Vous pouvez même boucle revenir au début si vous voulez:

var elements = [ "one", "two", "three"]; 
animate(elements); 

function animate(elements, index) 
{ 
    if(!index) index = 0; 
    var box = '#' + elements[index]; 
    var $$box = $(box); 
    console.log('start - ' + elements[index]); 
    $$box.fadeOut(500, function() 
    { 
     console.log('showing - ' + elements[index]); 
     $$box.fadeIn(500, function() { 
      $$box.css('backgroundColor','white'); 
      console.log('end - ' + elements[index]); 
      // go to next element, or first element if at end 
      index = ++index % (elements.length); 
      animate(elements, index); 
     }); 
    }).css('backgroundColor', 'aqua'); 
} 
bien
+0

Ceci est une réponse plus complète à l'exemple exact affiché alors le mien; Bien que pour ma défense j'essayais de garder un simple exemple de récursion, comme mon commentaire ici: http://stackoverflow.com/questions/2168485/wait-for-each-jquery – Erik

+0

Votre exemple est plus simple, et parfois peut être bénéfique (plus facile à comprendre, dépend de ce que vous voulez faire) – SamWM