Question

使用$config['base_url'] = 'http://example.com'; $config['index_page'] = ''; $config['uri_protocol'] = 'REQUEST_URI';完成上一个Div动画后动画Div。这个简单的方法适用于deferred object和f1两个函数，但是当我引入f2时，它失败了。

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

JSFiddle：https://jsfiddle.net/j0bgzjvd/

＆＃13;

f3

＆＃13;

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 ] );

＆＃13;

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

＆＃13;

Answer 1

你会发现它更简单：

将animationAgent()变成一个简单的，承诺返回的工作者函数，它只知道它动画的元素，而不知道它的使用顺序（即省略prevElement），< / LI>
安排功能f1()，f2()和f3()，以便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 2

有没有想过在动画功能中使用回调？

以下是fadeOut的示例：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 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动画

3 个答案:

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

3 个答案:

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