等待每个jQuery

Question

我试图让每个声明中的div淡入/淡出.问题是在淡入/淡出完成之前调用下一个项目.

<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>

控制台节目 -

start - one
end - one
start - two
end - two
start - three
end - three
showing - one
showing - two
showing - three

我想要的东西像 -

start - one
showing - one
end - one
start - two
showing - two
end - two
start - three
showing - three
end - three

那么在继续下一个值之前,我怎么能等待每个'每个' 完全完成？

Answer 1

您将不得不使用回调 - 当前函数完成时执行的函数.要做到这一点.fadeOut你会做:

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

直到fadeOut完成后才会调用myFunction.使用$ .get的AJAX调用也可以有回调函数.

这是一个有效的例子,虽然我确信有更好的方法:

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); });
}

然后在你的文件中.你打电话给:

animate(theArray);