jQuery回調代理奇怪

Question

我想做的事情應該很簡單，但我顯然不是以最好的方式做到這一點。

我基本上只是試圖褪色一些元素，然後根據點擊哪個鏈接淡入另一組。

這裏是小提琴：http://jsfiddle.net/redenvy/sTzna/1/確保選擇的jQuery

正如你所看到的元素碰到對方，然後將內容似乎淡入淡出的額外時間。

任何幫助表示讚賞！

HTML：

<div class="row module-intro main"> 
    <a href="#" id="new">New</a> 
</div> 

<div class="row module-intro new hidden"> 
    <a href="#" id="main">Cancel</a> 
</div> 

<div class="row main"> 
    <p>MAIN CONTENT</p> 
</div> 

<div class="row new hidden"> 
    <p>NEW CONTENT</p> 
</div> 

CSS：

.hidden { 
    display:none; 
} 

的JavaScript：

$(document).ready(function() { 
    $('.module-intro a').click(function(){ 
    var id = $(this).attr('id'); 
    $('.row').fadeOut(600,function(){ 
     $('.row.'+id).fadeIn(800); 
    }); 
    }); 
}); 

Answer 1

您動畫所有.row元素來開始，而不僅僅是當前顯示的。您應該切換到這一點：

$(document).ready(function() { 
    $('.module-intro a').click(function(){ 
    var id = $(this).attr('id'); 
     $('.row:visible').fadeOut(600,function(){ 
     $('.row.'+id).fadeIn(800); 
    }); 
    }); 
}); 

Answer 2

你在藏格太衰落，這就是爲什麼嘗試this

Answer 3

這是因爲你淡出所有.row元素，其中一個已經隱藏，並且因此這個回調被過早地解僱了。

相反，你不應該爲隱藏的動畫製作動畫。

$('.row:not(.' + id + ')').fadeOut(600, function() { 
// ... 

http://jsfiddle.net/sTzna/14/