如何淡出一組 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>