我试图让每个声明中的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
那么在继续下一个值之前,我怎么能等待每个’每个’完全完成？
解决方法
您将不得不使用回调 – 当前函数完成时执行的函数.要使用.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); });
}
然后在你的document.ready你打电话：
animate(theArray);
