7

html:

<span>hello world!</span>

js：（使用回调）

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow', function() {
    // callback after fontsize increased
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

这样每次SPAN点击时，在字体大小增加后附加文本“滚动”，而不是一起发生。

它可以通过使用 queue() 来完成，如下所示：

js：（使用队列（））

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

我不确定它们之间有什么区别。两者都做同样的事情。

为什么 queue() 比使用回调更好/更喜欢（或者为什么不是）？queue() 有什么特别之处？

谢谢。

4

2 回答 2

1

您可以将更多事件（您在代码中指定的其他事件）放入与放入动画相同的队列中。

所以回调将在你的动画准备好后立即执行，但如果使用 queue() ，队列中可能会有其他事件首先执行。

这种行为的好处是不会同时执行并发事件（例如向上滑动和向下滑动），这会产生奇怪的事情。

例子：

$('div').click(function() {
  $(this).animate({
    color: 'green'
  }, 'slow'})
  .queue(function() {
    $(this).text( ' got colored! ' );
  });
});

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  ' got bigger! ' );
  });
});

如果你先点击div，然后点击span，现在你可以确定div的队列会先被执行，当它准备好时，span的队列就会被执行。

在回调的情况下，属于最先准备好的动画将首先执行。如果它们同时准备好，那么它们将同时执行。在这种情况下，这将导致看不到“有色！” 文字或“变大了！” 文本。

于 2012-06-01T09:10:01.680 回答
0

使用callback参数与使用方法完全相同.queue(callback)。
当您callback向任何动画提供 a 时，它只是将回调以与.queue.

.queue(callback)只是另一种从动画中单独添加回调的方法。
这样做有完全正当的理由：

$(this).animate(...);
if (shouldDoCallback) {
    $(this).queue(...);
}
于 2012-06-20T20:12:41.110 回答