[jQuery] Iterating over a list

[gthorne]

Hi, real simple problem, but I am struggling to find a solution.  I
have an array:

        var arr = [ "one", "two", "three", "four", "five" ];

and I want to fade the values in and out, moving on to the next one.
I've tried 'jQuery.each()', for loops, and so on, but I either get the
last one of the list fading in and out over and over, or it doesn't
work at all.

What I tried first was:

 $(document).ready(function(){
        var arr = [ "one", "two", "three", "four", "five" ];

       jQuery.each (arr, function() {
         $('#box_content').text(this).fadeIn().fadeOut();
        });
});

Now, I'm up to this:

                         $(document).ready(function(){
                        var arr = [ "one", "two", "three", "four", "five" ];

                                for (i=0; i<5; i++)
                                {
                                        
$("#box_content").fadeOut('slow').fadeIn('slow', function () { $
(this).text(arr[i]); });
                                }
                         });

I think what's happening on a lot of attempts is that the loop is
going on through, and not waiting for the function.  So, I was hoping
that putting it in the callback would solve that.

I've done a lot of ajax with jquery, but evidently, I need to brush up
on my animation stuff.

Thanks for your help.
    -Greg