jQuery FadeIn/FadeOut, looping through an array

Question

At this url - http://thespacebetweenthewords.org/sandbox/

I am attempting to cycle through arrays of words with a jQuery FadeIn/FadeOut effect.

The array of words displayed doesn't seem to be starting at [0], though. I am perhaps missing something with the order in which the functions are executing.

If anyone in the community would like to comment on the code as it stands so far, insight is appreciated.

Answer 1

You are correctly using a callback function with .fadeIn() to ensure that the word doesn't start to fade out until it's finished fading in. However, you haven't applied the same principle to iterating through the verbs. Your outer for loop will tear through all the verbs in no time, showing each one, and then patiently waiting until it's time to hide them (when, of course, only the most recent verb will still be showing by then).

You might try something like this:

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