When you start an animation like fadeIn() the animation starts in the
background and the script goes on without waiting the animation ton
complete, so with your each you're changing the texts one by one blazingly
fast even before the first fadeIn() completes.
What you might want instead is something like this :
var recursive_anim = function(list, step, target, duration) {
if (list[step]) {
target(text).fadeIn(duration, function() {
$(this).fadeOu(duration, function() {
recursive_anim(list, step + 1, $(this), duration)
});
});
}
};
fadeIn() and fadeOut() callbacks are triggered as the animation completes.
Michel Belleville
2009/11/8 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
>
