jQuery FadeIn / FadeOut, bucle a través de una matriz

Question

En esta url - http://thespacebetweenthewords.org/sandbox/

Estoy intentando desplazarse a través de las matrices de palabras con un jQuery FadeIn / FadeOut efecto.

No parece que la matriz de palabras mostradas a partir de [0], aunque. tal vez me estoy perdiendo algo con el orden en que el funciones están ejecutando.

Si alguien en la comunidad quisiera comentar el código, ya que soportes para lejos, penetración es apreciado.

Answer 1

Se usa correctamente una función de devolución de llamada con .fadeIn() para garantizar que la palabra no se inicia a desaparecer hasta que esté terminado en el desvanecimiento. Sin embargo, usted no ha aplicado el mismo principio para iterar a través de los verbos. El bucle for exterior se rasgará a través de todos los verbos en ningún momento, mostrando cada uno, y luego esperar pacientemente hasta que sea hora de ocultarlos (cuando, por supuesto, sólo el más reciente verbo se seguirá mostrando por entonces).

Usted puede tratar de algo como esto:

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);