淡入/淡出多个 div

Question

Here's the final version that works fine!

所以，我有多个 div，每个 div 都包含一个按钮，用于淡入另一个 div，并自行淡出。当我淡入一个 div 时，所有其他 div（由按钮淡入）将淡出。马贝难懂，不过here is my FIDDLE

Div 1 带有淡入 div 2 的按钮（显示：无；）

<div class="cnt" id="cnt-1">CONTENT 1<br>
    <div class="btn" id="btn-1">BUTTON 1</div>
</div>

<div class="cnt" id="cnt-2">CONTENT 2<br>
    <div class="btn" id="btn-2">BUTTON 2</div>
</div>

Div 3 带有淡入 div 4 的按钮（显示：无；）

<div class="cnt" id="cnt-3">CONTENT 3<br>
    <div class="btn" id="btn-3">BUTTON 3</div>
</div>

<div class="cnt" id="cnt-4">CONTENT 4<br>
    <div class="btn" id="btn-4">BUTTON 4</div>
</div>

等等……

JS 到淡出 1 和淡入 2

$('#btn-1').click(function(e){    
    $('#cnt-1, #cnt-4, #cnt6').fadeOut('slow', function(){
        $('#cnt-2').fadeIn('slow');
    });
});

$('#btn-2').click(function(e){    
    $('#cnt-2').fadeOut('slow', function(){
        $('#cnt-1, #cnt-3, #cnt-5').fadeIn('slow');
    });
});

如您所见，div 不会同时褪色并跳来跳去，这是我的问题。

The ORIGINAL work/fiddle

Answer 1

试试this：

$('#btn-1').click(function(e){       
    $('#cnt-1').fadeOut('slow', function(){
    $('#cnt-2').fadeIn('slow');
    });

$('#cnt-4').fadeOut('slow', function(){ 
    $('#cnt-3').fadeIn('slow');
});
$('#cnt-6').fadeOut('slow', function(){
  $('#cnt-5').fadeIn('slow');
});

});

只为按钮btn-1 做了。