如何淡出一组 HTML 元素，然后用 jQuery 淡入其中一个？

Question

看起来很简单。 我想要一个所有<div> s到fadeOut() ，然后1个<div> s到fadeIn() 。 但是我用这样的东西（ jsfiddle with 3 <div> s ）得到了疯狂的行为

<a href="#" onclick="$('div').fadeOut(2000, function() {$('div#first').fadeIn();}); return false;">Show first div</a>
<br/>
<a href="#" onclick="$('div').fadeOut(2000, function() {$('div#second').fadeIn();}); return false;">Show second div</a>
<br/>
<a href="#" onclick="$('div').fadeOut(2000, function() {$('div#third').fadeIn();}); return false;">Show third div</a>
<br/>
<div style="display:none" id="first">First div</div>
<div style="display:none" id="second">Second div</div>
<div style="display:none" id="third">Third div</div>

有时旧的 div 和新的 div 会消失。 有时新的 div 会出现，淡出然后重新出现。

我认为发生的事情是，当所有div的fadeOut ，每个人都调用了fadeIn函数，这变得有点棘手。 那么这里有一个解决方案，以fadeIn只毕竟已经淡出？

Answer 1

问题是您的回调被调用 3 次，在该 div 的动画完成后，每个匹配的 div 调用一次。

以下是jQuery 文档的摘录：

回调函数

如果提供，则在动画完成后触发回调。 这对于将不同的动画按顺序串在一起很有用。 回调不发送任何参数，但它被设置为正在设置动画的 DOM 元素。 如果对多个元素进行动画处理，请务必注意，回调对每个匹配的元素执行一次，而不是对整个动画执行一次。

从 jQuery 1.6 开始，.promise() 方法可以与 deferred.done() 方法结合使用，当所有匹配的元素都完成它们的动画时，为整个动画执行单个回调（请参阅 .promise 的示例() )。

这是您问题的解决方案：

<a href="#" onclick="$('div').fadeOut(2000);$('div').promise().done(function() {$('div#first').fadeIn();}); return false;">Show first div</a>
<br/>
<a href="#" onclick="$('div').fadeOut(2000);$('div').promise().done(function() {$('div#second').fadeIn();}); return false;">Show second div</a>
<br/>
<a href="#" onclick="$('div').fadeOut(2000);$('div').promise().done(function() {$('div#third').fadeIn();}); return false;">Show third div</a>
<br/>
<div style="display:none" id="first">First div</div>
<div style="display:none" id="second">Second div</div>
<div style="display:none" id="third">Third div</div>