为什么所有的迭代都同时运行？
为什么所有的迭代都同时运行？
提问于 2012-11-21 12:40:41
以下是模拟与此代码相关的问题的jsfiddle：
$('#button').click(function(){
var i;
for (i = 1; i < 4; ++i) {
$('#img' + i).fadeIn("slow").delay(1000);
$('#img' + i).fadeOut("slow");
}
});我期望#img1元素淡入，然后执行停止1秒，然后淡出，然后重新开始执行#img2元素，依此类推。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-21 12:56:43
动画似乎同时运行的原因是jQuery的动画都是异步执行的。所以你的代码所做的基本上是启动所有的动画，然后你的浏览器几乎同时处理实际的动画。
然而，jQuery的动画函数确实支持使用动画完成后调用的回调函数。通过确保后面的动画在此回调中发生，我们可以强制动画按顺序执行。
以下是实现需求的一种方法(jsfiddle here)：
$('#button').click(function(){
var i;
var $elems = [];
for (i = 1; i < 4; ++i) {
$elems.push($('#img' + i));
}
var animate = function () {
var $elem;
if ($elems.length) {
$elem = $elems.shift();
$elem.fadeIn("slow").delay(1000).fadeOut("slow", animate);
}
// if the $elems has been cleared out, we're done and this function won't be requeued
};
animate();
});请注意，我正在排队另一个对animate()的调用，作为.fadeOut的回调。然后，函数将重新执行，但$elems数组的状态将在每个函数调用中发生变化，以便每个元素都按顺序执行一次动画。当数组被清空时，该函数将只运行一次，以验证所有元素都已被动画处理，在这种情况下，它将返回，而不会重新排队。
Stack Overflow用户
发布于 2012-11-21 12:55:09
请尝试以下操作：
我们无法在循环中使用fadeIn() delay。
相反，我们可以使用setInterval().
请尝试以下代码。
var i;
var timeMgt;
$('#button').click(function(){
i = 1;
timeMgt = setInterval(ChangeImage,1000);
});
function ChangeImage()
{
if(i<4)
{
$('#img' + i).fadeIn("slow").delay(1000);
$('#img' + i).fadeOut("slow");
i++;
}
else
{
window.clearInterval(timeMgt);
return;
}
}Stack Overflow用户
发布于 2012-11-21 13:02:34
您可能希望利用fadeIn和fadeOut函数中的回调。下面是一个http://jsfiddle.net/JaQmd/5/示例。
代码的核心基本上是调用带有新图像编号的回调，如下所示
var imageNumber = 0;
$('#button').click(function doAnimation() {
++imageNumber;
if(imageNumber <= 3){
$("#img" + imageNumber).fadeIn('slow').delay(1000);
$("#img" + imageNumber).fadeOut('slow', doAnimation);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13486451
复制相关文章
相似问题
腾讯云开发者
