Question

我有以下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/

Answer 1

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

您始终可以使用动画延迟对象并执行此操作。

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

第一个动画将在第一个完成时开始。

Answer 2

在setTimeout()内，您将失去this的值，这就是您的代码无效的原因（this将设置为window对象）。

你可以改用这样的东西：

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

Answer 3

你不能在回调中使用它，它将指向另一个对象

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

Answer 4

您不需要使用超时。每个好的插件都会在动画完成后提供回调，即使那些没有动画也会使用.animate()。这意味着，您可以通过获取.promise（如Grzegorz的答案）或使用.queue来挂钩动画队列：

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

我应该使用其他东西而不是setTimeout吗？

4 个答案: