Zanikanie / rozłączanie wielu elementów div - jquery, html, fadein, fadeout

Oto ostateczna wersja, która działa dobrze!

Mam więc wiele div, z których każdy zawiera aprzycisk, aby zanikać w innym div i zanikać same. Kiedy zanikam w jednym div, wszystkie inne div (zanikające w przycisku) zanikają. Mabe trudno zrozumieć, ale oto mój FIDDLE

Div 1 z przyciskiem do zanikania div 2 (wyświetlacz: brak;)

<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 z przyciskiem do zanikania div 4 (wyświetlacz: brak;)

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

i tak dalej...

JS do zanikania 1 i zanikania 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");
});
});

Jak widać, divy nie gasną w tym samym czasie i skaczą dookoła, a to jest mój problem.

ORYGINALNA praca / skrzypce

Odpowiedzi:

Próbować to :

$("#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");
});

});

Zrobiłem dla przycisku btn-1 sam.