Допомога у програмуванні, відповіді на питання / Javascript / Crossfade 2 divs без клацання (JS або jQuery) - javascript, jquery, html, анімація

Crossfade 2 divs без клацання (JS або jQuery) - javascript, jquery, html, анімація

Я спробував зробити кілька тестів. Ось у чому проблема: перший div легко зникав, але другий div, мабуть, зникав без необхідності клацання. Що сталося з останнім, це те, що він блимав.

Я хочу, щоб "попередній завантажувач" грав протягом 5 секунд, а потім переходив до 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>

Ось мій JSFiddle, про всяк випадок.

Відповіді:

0 для відповіді № 1

Це те, що ви шукаєте.?

.replace не отримає вам того, що ви хочете, він не замінить весь вміст, а лише перший occurrence навіть якщо ви використовуєте .replaceWith() це не допоможе.

З цим краще піти .remove() і потім fadeIn інший зміст.

Я також дав style="display:none;" до #isthis для початкового приховування.

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