3

私はjqueryとjsが初めてなので、ばかげた質問かもしれません。

私は2つのアニメーションを持っています:

$(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の.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 に答える