Jquery链接与回调

对于jQuery，以下两个代码片段的结果有什么不同。任何东西回调和链中的第二项都是在第一个动画完成后执行的，这对吗

$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

vs

在什么类型的情况下，我希望使用其中一种而不是另一种？如果我需要做一些更复杂的事情或者切换到不同的选择器，我会只使用后者吗

---

提前感谢。

它们实际上是一样的，所以您可能只需要使用第一个

回调（第二个版本）用于运行任何未自动排队的任意代码

这包括其他jQuery方法，例如

.css（）

，如果不在回调中，将在动画完成之前很久运行

// .animate() is automatically queued
$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

---

---

没有回调

 // Animation starts ----v
$(selector).animate({ opacity: 1 }).css({ opacity: 0.5 });
 // ...but .css() runs immediately-------------^
 // ...because it isn't automatically added to the queue.

---

唯一的区别是计时：在第一个动画完成之前，不会执行第二个示例中的回调。第一个示例中的链接动画将在第一个动画开始后立即出现。

作为一个快速评估，我认为第一个将更有效，因为您不必将$（this）转换为jQuery对象，然后对其调用animate。如果你必须做更复杂的事情，你可能只想使用第二个选项。编辑：我看你不是在追求效率，但我认为这两种功能是一样的，因为在第一种情况下，animate必须在运行第二个调用之前返回。jQuery通过对动画进行排队来管理动画，以便在第一个动画完成之前，第二个动画仍然不会执行。但这仅适用于动画。请参见@Stefan上的示例。你说的话适用于这里列出的任何东西吗@technoTarek：大部分。有些，如

.hide（）

和

.show（）

可以作为动画进行操作。因此，如果给这些方法一个持续时间，比如

.hide（1000）

，那么它将被排队。如果没有持续时间，则它不排队。@technoTarek:是的，这足以将它添加到队列中。在动画之后链接

show/hide

，这是一个很有用的技巧。@Rory我最初认为时间也不同，但后来我在jQuery.com上读到了这一点：每个元素都可以有一对多的函数队列由jQuery附加到它。在大多数应用程序中，只使用一个队列（称为fx）。队列允许异步调用元素上的一系列操作，而不会停止程序执行。。。例如：

$（'#foo'）.slideUp（）.fadeIn（）执行此语句时，元素立即开始其滑动动画，但淡入淡出的过渡被放置在fx队列中，只有在滑动过渡完成后才能调用。@technoTarek这很有趣，你有针对懒惰的人（如我）的链接吗？很好的解释，我只是在看jQuery源代码，你是对的，先生！
// .css() is not automatically queued, so you'd need a callback
$(selector).animate({ opacity: 1 }, function() {
    $(this).css({ opacity: 0.5 });
});

 // Animation starts ----v
$(selector).animate({ opacity: 1 }).css({ opacity: 0.5 });
 // ...but .css() runs immediately-------------^
 // ...because it isn't automatically added to the queue.