Question

I have a function that expects an array. This array shall be printed out (with animations) within a loop. Each value gets once applied to the div below. First it’s empty. Then the first value from the array is faded in, shown for a few seconds and finally fade out. All values in the array shall be treated like this. And the div shall just show one value at a time.

<div id="text_wrapper"></div>

The function:

function runAni(arr){
    $.each(arr, function(key, value) { 
        //alert(key + ': ' + value); 
    });
}

I already tried the queue, but failed. Please help 🙂

Answer 1

function runAni(arr) {
    var $div = $('#text_wrapper');

    $.each(arr, function(index, value) {
        setTimeout(function() {
            $div.html(value).fadeIn().fadeOut();
        }, 1000 * index);
    });
}

var arr = ["foo", "more foo", "Even more of that"];
runAni(arr);​

Live DEMO