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

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

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