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

看起来很简单。我想要一个全部

s到

fadeOut（）

，然后一个

s到

fadeIn（）

。但是像这样的事情让我有疯狂的行为（）

第一组
第二组
第三组

有时旧部门和新部门都会消失。有时新的div将出现、淡出，然后重新出现

---

我认为当所有的

div

s

fadeOut

，每一个调用

fadeIn

函数时，就会发生一点问题。那么，在所有的div都被淡出之后，

fadeIn

只有才有什么解决方案呢？

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

以下是一段摘录自：

回调函数

如果已提供，则在动画完成后将触发回调。 这对于将不同动画串在一起非常有用 序列回调没有发送任何参数，但设置为 正在设置动画的DOM元素。如果设置了多个元素的动画，则它将 重要的是要注意，回调在每次匹配时执行一次 元素，而不是一次用于整个动画

从jQuery1.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>

第一组
第二组
第三组

请将您的代码放入您的问题中。我必须查看那些

promise（）

和

done（）

函数！

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