jQuery FadeIn/FadeOut, boucle à travers un tableau

Question

à cette adresse - http://thespacebetweenthewords.org/sandbox/

Je tente de faire défiler les tableaux de mots avec un effet jQuery FadeIn/FadeOut .

Le tableau de mots affiché ne semble pas commencer à [0], cependant. Il me manque peut-être quelque chose avec l'ordre dans lequel les fonctions sont en cours d'exécution.

Si quelqu'un dans la communauté aimerait faire des commentaires sur le code comme se tient jusqu'à présent, un aperçu est apprécié.

Answer 1

Vous utilisez correctement une fonction de rappel avec .fadeIn() pour vous assurer que le mot ne commence pas à disparaître avant la fin du fondu. Toutefois, vous n'avez pas appliqué le même principe pour parcourir les verbes. Votre boucle extérieure for déchirera tous les verbes en un rien de temps, montrant chacun d'entre eux, puis attendra patiemment jusqu'à ce qu'il soit temps de les cacher (alors que, bien sûr, seul le verbe le plus récent sera encore visible).

Vous pouvez essayer quelque chose comme ceci:

function showWord(selector, words, wordTime, i) { 
    if (words.length < i) 
     return; 
    var word = words[i]; 
    $(selector).html(word).fadeIn(wordTime, function() { 
     $(selector).fadeOut(wordTime, function() { 
      showWord(selector, words, wordTime, i + 1); 
     }); 
    }); 
} 
showWord("#verb-content", data.verbs, verbTime, 0);