Aiuto nella programmazione, risposte alle domande / Javascript / Crossfade 2 div senza clic (JS o jQuery) - javascript, jquery, html, animazione

Crossfade 2 div senza clic (JS o jQuery) - javascript, jquery, html, animazione

Ho provato a fare diversi test. Ecco il problema: il primo div è scomparso facilmente, ma il secondo div avrebbe dovuto svanire senza la necessità di un clic. Quello che è successo a quest'ultimo è che ha battuto le palpebre.

Voglio che il "preloader" suoni per 5 secondi, quindi dissolvenza incrociata al div "isthis".

$(function(e) {
$("#preloader").fadeOut("1000", function() {
$("#preloader").replace("#isthis").fadeIn("2000");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<section>
<div class="rainbow">
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
</div>
</section>
</div>
<div id="isthis">
Here"s the other div.
</div>

Ecco il mio JSFiddle, per ogni evenienza.

risposte:

0 per risposta № 1

È questo quello che stai cercando?

.replace non ti procurerà ciò che desideri, non sostituirà l'intero contenuto ma sostituirà solo il primo occurrence anche se lo usi .replaceWith() non aiuterà.

È meglio andare con .remove() e poi fadeIn l'altro contenuto.

Ho anche dato style="display:none;" a #isthis per nascondere iniziale.

$(function(e) {
$("#preloader").fadeOut("1000", function() {
$(this).remove();
$("#isthis").fadeIn("2000");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<section>
<div class="rainbow">
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
<div class="bow">Test</div>
</div>
</section>
</div>
<div id="isthis" style="display:none;">
Here"s the other div.
</div>