Question

以下是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元素等。

Answer 1

动画似乎同时运行的原因是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数组的状态将在每个函数调用中发生变化，以便每个元素按顺序执行一次动画。当数组被清除时，该函数将再次运行以验证元素是否已经被动画化，并且在这种情况下它将返回而不重新排队。

Answer 2

请试试这个：

我们无法在循环中使用 fadeIn（）延迟。

我们可以使用 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;
    }
}

Answer 3

您可能希望在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);
  }
});

为什么所有迭代都在同一时间运行？

3 个答案: