一个 Div 个使用延迟对象的动画

Question

在上一个 Div 动画完成后使用 deferred object 为 Div 设置动画。这个简单的方法适用于 f1 和 f2 这两个函数，但是当我引入 f3 时它失败了。

有没有更好的方法可以使用延迟对象实现此目的？

var deferred = $.Deferred();

function animationAgent(element, prevElement) {
  $(prevElement).promise().done( function () {
    return $(element).css("display", "block").animate({width:360},2000, "linear")
  });
}

function f1() {
  animationAgent("#div1"); 
} 

function f2() {
  animationAgent("#div2", "#div1"); 
} 

function f3() {
  animationAgent("#div3", "#div2"); 
}

deferred.resolve();
deferred.done( [ f1, f2, f3 ] );

div {
  width: 200px; 
  height: 200px; 
  background-color: red; 
  margin-bottom: 10px; 
  display: none;  
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Answer 1

有没有想过在动画函数中使用回调？

这里有一个淡出的例子：https://jsfiddle.net/0r7e2wco/

fadeOutInTurn([
    $("#div1"),
    $("#div2"),
    $("#div3"),
    $("#div4"),
]);

//Fades out elements one after another
function fadeOutInTurn(elements) {
    var x = 0;
    function animate() {
        $(elements[x]).fadeOut(3000, function() {
            if(x < elements.length - 1) {
                x++;
                animate();
            }
        });
    }
    animate();
}

Answer 2

你会发现它更简单:

使 animationAgent() 成为一个简单的、有希望的 returning 工作函数，它只知道它所动画的元素，而不知道它的使用顺序（即省略 prevElement),
安排函数 f1()、f2() 和 f3()，以 return return animationAgent() 对他们的承诺。

那么你就有了构建可靠动画序列的基础。

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}
function f1() {
    return animationAgent("#div1"); 
} 
function f2() {
    return animationAgent("#div2"); 
} 
function f3() {
    return animationAgent("#div3"); 
}

f1().then(f2).then(f3);

DEMO

或者，从函数引用数组中机械地构造 .then 链：

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}
function f1() {
    return animationAgent("#div1"); 
} 
function f2() {
    return animationAgent("#div2"); 
} 
function f3() {
    return animationAgent("#div3"); 
}

[f1, f2, f3].reduce(function(promise, fn) {
    return promise.then(function() {
        return fn();
    });
}, $.when());

DEMO

或者，由于三个动画是相同的，您可以通过从元素选择器数组构造 .then 链并直接调用 animationAgent() 来避免对单独函数的需要：

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}

['#div1', '#div2', '#div3'].reduce(function(promise, selector) {
    return promise.then(function() {
        return animationAgent(selector);
    });
}, $.when());

DEMO

Answer 3

不确定，但我想这就是你想要的。

工作示例fiddle

我想你希望 deferred.done() 会一个接一个地执行 f1, f2, f3 它确实做到了。但它不会等待在这些函数中调用的动画在调用下一个函数之前终止。

尝试使用 console.log() 在控制台上记录函数调用，您就会知道。

这是更新后的 javascript 代码 -

var deferred = $.Deferred();
var lock = 1;

function animationAgent(element, id, prevElement) {
  var interval;
  var flag = 0;
  if (id != lock) {
    interval = setInterval(function() {
      if (id == lock) {
        clearInterval(interval);
        animationAgent(element, id, prevElement);
      }
    }, 1000);
  }else{
    $(prevElement).promise().done(function() {
      lock++;
      return $(element).css("display", "block").animate({
        width: 360
      }, 2000, "linear");
    });
  }
}

function f1() {
  return animationAgent("#div1", 1);
}

function f2() {
  return animationAgent("#div2", 2, "#div1");
}

function f3() {
  return animationAgent("#div3", 3, "#div2");
}

deferred.resolve();
deferred.done([f1, f2, f3]);

一个 Div 个使用延迟对象的动画

One Div animation after another using deferred object

javascript

jquery

deferred

jquery-deferred