Dissolvenze multiple in entrata / uscita: jquery, html, fadein, fadeout

Ecco la versione finale che funziona bene!

Quindi, ho più div, ciascuno contenente unpulsante per dissolvere in un altro div e svanire se stessi. Quando sbiadisco in un div, tutte le altre div (sbiadite dal pulsante) si dissolvono. Mabe difficile da capire, ma ecco il mio FIDDLE

Div 1 con pulsante per dissolvenza div 2 (display: none;)

<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 con pulsante per dissolvenza div 4 (display: none;)

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

e così via...

JS per dissolvenza in chiusura 1 e dissolvenza in apertura 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");
});
});

Come puoi vedere, i div non si sbiadiscono allo stesso tempo e saltano in giro, e questo è il mio problema.

Il lavoro / violino ORIGINALE

risposte:

Provare Questo :

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

});

Fatto per pulsante btn-1 solo.