我正在尝试使 div 淡入/淡出,该 div 位于each 语句中。问题是在淡入/淡出完成之前调用下一个项目。
<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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)