JQuery Fadein/Fadeout, percorrendo uma matriz

Question

Neste URL - http://thepacebetweenthewords.org/sandbox/

Estou tentando andar de bicicleta através de matrizes de palavras com um efeito de fadein/fadeout jQuery.

A matriz de palavras exibidas não parece estar começando em [0], no entanto. Talvez esteja faltando algo com a ordem em que as funções estão executando.

Se alguém da comunidade gostaria de comentar o código como está até agora, o insight é apreciado.

Answer 1

Você está usando corretamente uma função de retorno de chamada com .fadeIn() Para garantir que a palavra não comece a desaparecer até que termine. Seu exterior for O loop rasgará todos os verbos em pouco tempo, mostrando cada um, e depois esperando pacientemente até a hora de escondê -los (quando, é claro, apenas o verbo mais recente ainda será exibido até então).

Você pode tentar algo assim:

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