时间戳

首页 > 解决方案 > 在使用 Jquery 加载新内容之前淡入 div

javascript - 在使用 Jquery 加载新内容之前淡入 div

问题描述

我有一个父 div（容器类）和一个子 div（家庭类）。

我想在使用 Jquery 在其中加载新的子 div（约类）之前淡出父 div。

这是代码：

$(document).ready(function() {
  $('div.container').on('click', '#about-btn', function() {
    $('div.container').fadeOut(1000);
    $('div.container').fadeIn(1000).load('ABOUT.html');
  });
});
* {
  padding: 0;
  margin: 0;
}

.layout {
  background-color: black;
  height: 100vh;
}

.container {
  height: 70%;
  width: 100%;
}

.home,
.about {
  height: 100%;
  width: 100%;
  background-color: cyan;
}

.bottom-nav {
  height: 30%;
  width: 100%;
  background-color: brown;
}
<div class="layout">
  <div class="container">
    <div class="home">
      <button id="about-btn">About</button>
      <h1>HOME</h1>
    </div>
  </div>
  <div class="bottom-nav">
    <h1>Bottom Nav</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关于.html

<div class="about">
    <button id="home-btn">Home</button>
    <h1>ABOUT</h1>
</div>

我怎样才能做到这一点 ？

标签： javascripthtmljquerycss

解决方案

感谢威尔斯的建议。这是使用 Ajax 的解决方案：

$(document).ready(function() {
  $('div.container').on('click', '#about-btn', function() {
    $('div.home').fadeOut(500, function() {
      $.ajax({
        type: "GET",
        url: "ABOUT.html",
        data: {},
        success: function(data) {
          $('div.container').hide().fadeIn(500).html(data);
        }
      });
    });

  });
});
* {
  padding: 0;
  margin: 0;
}

.layout {
  background-color: black;
  height: 100vh;
}

.container {
  height: 70%;
  width: 100%;
}

.home,
.about {
  height: 100%;
  width: 100%;
  background-color: cyan;
}

.bottom-nav {
  height: 30%;
  width: 100%;
  background-color: brown;
}
<div class="layout">
  <div class="container">
    <div class="home">
      <button id="about-btn">About</button>
      <h1>HOME</h1>
    </div>
  </div>
  <div class="bottom-nav">
    <h1>Bottom Nav</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读