Jquery Chaining vs Callbacks

时间:2012-02-16 15:41:08

标签: jquery callback chaining

对于jQuery,以下两个片段的结果有什么不同。什么?我是否更正了第一个动画完成时回调和链中的第二个项目都被执行了?

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

VS

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

我想在哪种情况下使用另一种情况?如果我需要做更复杂的事情或切换到不同的选择器,我会只使用后者吗?

提前致谢。

2 个答案:

答案 0 :(得分:11)

它们实际上是相同的,所以你可能只是使用第一个。

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

这包括其他jQuery方法,例如.css(),如果不在回调中,将在动画完成之前很久就运行。

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

// .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.

答案 1 :(得分:0)

唯一的区别是计时:第二个示例中的回调在第一个动画完成之前不会执行。第一个示例中的链式动画将在第一个动画开始后立即发生。