Jquery: dissolvenza in più div con la stessa classe uno per uno, ma mostra sempre un massimo di 2 alla volta? - jquery

Sto usando il seguente codice Jquery per sbiadire in più div con la stessa classe uno per uno. Funziona bene e voglio che rimanga lo stesso.

Tuttavia, finisco con circa 30 occorrenze del div che scendono fino in fondo alla mia pagina in questo modo:

Div
Div
Div
Div
Div
Div

Quello che voglio è che ci sia sempre un massimo di2 immersioni visibili contemporaneamente. Voglio ancora che i div si dissolvano uno per uno, ma ho solo un massimo di 2 in mostra in qualsiasi momento. Quindi, se un utente chiude il primo div superiore per esempio, il div successivo si sbiadirà.

Risultato:

Div
Div   <---- If I close, next div fades in to replace

(Div Waiting to fade in when one of the first 2 divs is closed) etc

Codice:

<script>
$(document).ready(function(){
var animations = [];

$(".noti_box").each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});

$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $(".noti_box:visible").length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>

JsFiddle:

https://jsfiddle.net/2efwkxn8/

risposte:

Prova a dissolvereIn () usando il selettore e anche .next () che seleziona il div successivo. Esempio:

$(".fade").not(".fade:last").click(
function() {
$(this).fadeOut("slow");
$(this).next().fadeIn("slow");
}
);

$(".fade:last").click(
function() {
$(this).fadeOut("slow");
$(".fade:first").fadeIn("slow");
}
);

div {
width: 8px;
border: solid black 1px;
padding: 10px;
position: absolute;
}

div:hover {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">
1
</div>
<div class="fade" style="display:none">
2
</div>
<div class="fade" style="display:none">
3
</div>
<div class="fade" style="display:none">
4
</div>
<div class="fade" style="display:none">
5
</div>
<div class="fade" style="display:none">
6
</div>
<div class="fade" style="display:none">
7
</div>
<div class="fade" style="display:none">
8
</div>