3

我是 jquery 和 js 的新手，所以也许这是一个愚蠢的问题。

我有两个动画：

$(foo2).fadeOut(1000);
$(foo1).fadeOut(2000);

我希望在它们以某种优雅的方式完成时调用回调（可扩展到具有不同持续时间的任意数量的动画 - 并且不知道持续时间 - 可能使用.when）

到目前为止，我.when只调用最长的动画：

function different_animation() {

  effect = function() {

   foo1 = 'div'; //this is an example that selects multiple elements
   foo2 = 'p'; //this is an example that selects multiple elements

    var ret1 = $(foo1).fadeOut(1000);
    var ret2 = $(foo2).fadeOut(2000);

    var seconds = new Date().getTime() / 1000;
    console.log('fade out at'+seconds);

    // i know that to ret2 there is attached a longer animation is longer then ret1
    return ret2; 
  }

  $.when( effect() ).done(function() {
    var seconds = new Date().getTime() / 1000;
    console.log('done at '+seconds);
  });
}

但是如果有更多动画并且我不知道每个动画的时间怎么办？我需要一些可以加入 rets 的东西。

4

3 回答 3

2

您可以通过利用$.Deferred和回调功能来做到这一点fadeOut：

var deferred1 = $.Deferred();
var deferred2 = $.Deferred();
$(foo1).fadeOut(1000, function() { deferred1.resolve(); } );
$(foo2).fadeOut(2000, function() { deferred2.resolve(); } );

$.when(deferred1, deferred2).done(function() {
    console.log("both animations have completed");
});

这可以很容易地扩展到任意数量的动画（以及一般的承诺）。您可以将尽可能多的 promise 或 deferred 放入一个数组并使用

$.when.apply(null, arrayOfPromises).done(callback);

callback全部完成后开火。

看到它在行动。

于 2012-11-16T12:01:55.387 回答
2

jQuery 的the.animate()和其他效果方法返回一个可在.when()方法中使用的对象，因此无需手动创建和解析延迟对象。

var promises = [];
promises.push($("#foo1").fadeOut(1000));
promises.push($("#foo2").fadeOut(2000));
$.when.apply(null, promises).done(function() { /* all done */ });

从这个版本的 Jons jsfiddle 可以看出：http: //jsfiddle.net/2sJVX/55/

于 2013-12-12T08:40:33.980 回答
1

根据的文档，jquery.Deferred()您可以将函数链接到数组中，如下所示：

var arrayOfAnimation = [];

effect = function() {

  foo1 = 'div'; //this is an example that selects multiple elements
  foo2 = 'p'; //this is an example that selects multiple elements

  var deferred1 = $.Deferred();
  var deferred2 = $.Deferred();
  $(foo1).fadeOut(1000, function() { deferred1.resolve(); } );
  $(foo2).fadeOut(2000, function() { deferred2.resolve(); } );

  arrayOfAnimation.push(deferred1);
  arrayOfAnimation.push(deferred2);

  var seconds = new Date().getTime() / 1000;
  console.log('fade out at'+seconds);
}

$.done(arrayOfAnimation)
.done()
.done(function() {
  var seconds = new Date().getTime() / 1000;
  console.log('done at '+seconds);
});

更新：
来自文档的示例：

<script>
/* 3 functions to call when the Deferred object is resolved */
function fn1() {
  $("p").append(" 1 ");
}
function fn2() {
  $("p").append(" 2 ");
}
function fn3(n) {
  $("p").append(n + " 3 " + n);
}

/* create a deferred object */
var dfd = $.Deferred();

/* add handlers to be called when dfd is resolved */
dfd
/* .done() can take any number of functions or arrays of functions */
.done( [fn1, fn2], fn3, [fn2, fn1] )
/* we can chain done methods, too */
.done(function(n) {
  $("p").append(n + " we're done.");
});

/* resolve the Deferred object when the button is clicked */
$("button").bind("click", function() {
  dfd.resolve("and");
});
</script>
于 2012-11-16T12:02:36.607 回答