wait for each jQuery

each, jquery, wait

Solution

Your going to have to use callbacks - functions that get executed when the current function is finished. To do this with `.fadeOut` you would do:

$('#element').fadeOut( 400, myFunction );

myFunction would not be called until fadeOut was completed. AJAX calls with $.get also can have callback functions.

Here's an example that works, although I'm sure there's a better way:

function animate(myArray, start_index) {

    // Stealing this line from Sam, who posted below.
    if(!start_index) start_index = 0;

    next_index = start_index+1;
    if(next_index > myArray.length) { return; }

    box = '#' + myArray[start_index]; 
    $(box).fadeOut(500, function() { animate(myArray,next_index); });
}

and then in your document.ready you'd call:

animate(theArray);

Problem

I'm trying to make a div fade in/out that's within an each statement. The problem is that next item is called before the fade in/out is complete. ``` <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <div id='one'>one</div> <div id='two'>two</div> <div id='three'>three</div> <script> $.each([ "one", "two", "three"], function() { console.log( 'start - ' + this ); animate( this ); console.log( 'end - ' + this ); }); function animate( id ) { box = '#' + id; $(box).fadeOut( 500, function( ) { console.log('showing - ' + id); $(box).fadeIn( 500 ); $(box).css('backgroundColor','white'); }); } </script> ``` console shows - ``` start - one end - one start - two end - two start - three end - three showing - one showing - two showing - three ``` I would want something like - ``` start - one showing - one end - one start - two showing - two end - two start - three showing - three end - three ``` So how can I wait for each 'each' to be completely finished before moving on to the next value?

Original source