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

您想在第一个动画完成后运行第二个动画，还是想同时运行它们但有一些延迟？

您始终可以使用动画延迟对象并这样做。

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

当第一个动画完成时，第二个动画将开始。

于 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(). 这意味着，您可以通过获取.promisefor it（如 Grzegorz 的回答）或使用.queue：

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