Question

我尝试过几次测试。这就是问题所在：前者很容易消失，但后者div应该在不需要点击的情况下消失。后者发生的事情是它眨了眨眼。

我想要＆＃34; preloader＆＃34;玩5s，然后交叉淡入＆＃34; isthis＆＃34;格。

＆＃13;

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

＆＃13;

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

＆＃13;

Here's my JSFiddle, just in case.

Answer 1

这就是你要找的。？

.replace无法获得您想要的内容，它不会取代整个内容，只会替换第一个occurrence，即使您使用.replaceWith()它也无济于事。

最好使用.remove()，然后使用fadeIn其他内容。

我还style="display:none;"给了#isthis初始隐藏。

＆＃13;

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

＆＃13;

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

＆＃13;

Crossfade 2 div没有点击（JS或jQuery）

1 个答案: