0

私は次のHTMLを持っています：

<div id="wrapper">
      <div class="p1">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a>
      </div>

      <div class="p2">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a>
      </div>
</div>

パネル間の反転アニメーションとして機能するプラグインを使用しています（p1およびp2）

以下は完全に機能します。

last.parent().parent().quickFlipper({refresh :1});
$(this).parent().parent().quickFlipper({refresh :1});

$(this).parent().parent().quickFlipper({refresh :1});でも、遅らせたいです。setTimeoutを使用してみました：

last.parent().parent().quickFlipper({
    refresh: 1
});
setTimeout(function () {
    $(this).parent().parent().quickFlipper({
        refresh: 1
    });
}, 1200);

これを行うと、setTimeout内の関数はまったく実行されません。遅延させるためにsetTimeout以外のものを使用する必要があるかどうか疑問に思いました$(this).parent().parent().quickFlipper({refresh :1});

プラグインのドキュメントを読みましたが、この問題については何もありません。

これが私の完全なコードです：http： //jsfiddle.net/kBDFD/

4

4 に答える 4

2

最初のアニメーションが終了したときに2番目のアニメーションを実行しますか、それとも同時に実行しますが、少し遅れますか？

いつでもアニメーション遅延オブジェクトを使用して、このようにすることができます。

var self = this;
last.parent().parent().quickFlipper({refresh :1}).promise().done(function() {
  $(self).parent().parent().quickFlipper({refresh :1});     
});

最初のアニメーションが終了すると、2番目のアニメーションが開始されます。

于 2012-07-16T17:57:56.417 に答える
1

の内部ではsetTimeout()、の値が失われるthisため、コードは機能しません（オブジェクトthisに設定されwindowます）。

代わりに次のようなものを使用できます。

var self = this;
setTimeout(function () {
    $(self).parent().parent().quickFlipper({refresh: 1});
}, 1200);
于 2012-07-16T17:53:26.000 に答える
1

これをコールバックで使用することはできません。他のオブジェクトを指します

last.parent().parent().quickFlipper({
    refresh: 1
});
var thiz = this;
setTimeout(function () {
    $(thiz).parent().parent().quickFlipper({
        refresh: 1
    });
}, 1200);
于 2012-07-16T17:53:59.450 に答える
0

タイムアウトを使用する必要はありません。すべての優れたプラグインは、アニメーションが完了したときにコールバックを提供し、使用しないプラグインでもコールバックを提供します.animate()。つまり、.promise（Grzegorzの回答のように）アニメーションキューを取得するか、次を使用して、アニメーションキューにフックすることができ.queueます。

last.parent().parent().quickFlipper({refresh :1}).queue(function(next) {
   $(this).parent().parent().quickFlipper({refresh :1});
   next();
});
于 2012-07-16T18:02:59.870 に答える