在$ .each中使用append显示整个数组

Question

Okay, so I have an array of characters and i'm wanting them to display one at a time. This is the code i'm trying to use:

$.each(characterarray, function( index, value ){
   $("div").fadeOut(300).delay( 10 ).append( value ).fadeIn(300);
});

So instead of fading out, waiting, append one of the array, and fade in.

It would: fade out, wait, append all of the array, and fade in.

When I used

alert( value );

and it would apply an alert for each letter, but when I tried the to append it would show all of the array at once.

Answer 1

The loop finishes immediately, you'll have to increment the delay

$.each(characterarray, function( index, value ){
     $("div").delay(index*1000).fadeOut(300, function() {
        $(this).append( value ).delay(10).fadeIn(300);
     });
});

FIDDLE