JQuery Fadein/Fadeout und schleifen durch ein Array

Question

Bei dieser URL - http://thespacebetweenthewords.org/sandbox/

Ich versuche, mit einem JQuery Fadein/Fadeout -Effekt durch Arrays von Wörtern zu fahren.

Die angezeigte Reihe von Wörtern scheint jedoch nicht mit [0] zu beginnen. Ich fehlt vielleicht etwas mit der Reihenfolge, in der die Funktionen ausgeführt werden.

Wenn jemand in der Community den Code so weit kommentieren möchte, dass es bisher ist, wird Insight geschätzt.

Answer 1

Sie verwenden korrekt eine Rückruffunktion mit .fadeIn() Um sicherzustellen, dass das Wort erst nach dem Eintauchen ausgeblendet wird. Dein Outer for Die Loop durchreißt alle Verben in kürzester Zeit, zeigt jeden und wartet dann geduldig, bis es Zeit ist, sie zu verbergen (wenn natürlich nur das letzte Verb bis dahin noch angezeigt wird).

Sie könnten so etwas versuchen:

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