jQuery链接与动画函数的回调

dar*_*mkd 6 javascript jquery animation

说我有一些我想要动画的元素:

$('.hey').show(1000).slideUp(1000);
Run Code Online (Sandbox Code Playgroud)

这和之间有什么区别:

$('.hey').show(1000, function() {
  $(this).slideUp(1000);
});
Run Code Online (Sandbox Code Playgroud)

就内部发生的事情而言?据我所知,动画在jQuery中是异步的.所以,第一个例子,showslideUp应该火在同一时间.在第二,slideUp应该只在show结束后开火.

然而,出于某种原因,人们喜欢这个答案说他们是"相同的".尽管他们的工作方式不同(显而易见),为什么它们相同(在第一个例子中,返回会立即发生,与第二个不同)?

T.J*_*der 5

然而,出于某种原因,人们喜欢这个答案说他们是"相同的".

你是对的,他们不是.如果多个元素匹配,它们之间会有很大的差异.hey.但是使用引用的代码,虽然它们采取的步骤顺序不同,但它们最终会同样的事情.

尽管他们的工作方式不同(显而易见),为什么它们相同(在第一个例子中,返回会立即发生,与第二个不同)?

在这两个示例中,代码立即运行并完成("返回").

在第一个例子中,调用slideUp立即发生, jQuery通过将slideUp动画添加到动画队列的末尾并返回来处理该调用; 当在动画队列中到达时,实际的slideUp会在稍后发生.

在第二个示例中,调用show立即发生,然后在动画完成后,调用slideUp完成.

当多个元素与您的选择器匹配时的关键区别在于,在第一个示例中,有一个调用slideUp,它将slideUp操作添加到您调用它的jQuery对象中的当前元素集的动画队列中.在第二个中,有多个调用完成回调,每个元素完成一个.

另外一个很重要的区别是由强调阿伦P约翰尼拉注释:如果您要添加其他动画功能,这些相同的元素以后,它会被添加到队列中的第一个例子slideUp,但在第二个例子中slideUp之后的其他动画.

但是,再次使用引用的代码,虽然他们采取不同的道路到达那里,但他们最终做了同样的事情.

  • 我认为还有另一个不同之处在于假设有另一个事件处理程序在show动画运行时执行它现在添加了另一个动画,现在动画的顺序在两种情况下都会改变...在第一种情况下,新的动画将在幻灯片之后发生起来,但在第二次它将发生 - 只是添加它作为答案 (3认同)