jquery - 如何使用 jQuery 和 CSS 隐藏和淡化 div

Question

我有 HTML，其中我想让一些 div 在 Z 轴上显示在另一个之上，隐藏“world”，id 为“hello”的 div 淡出，然后 id 为“world”的 div 淡入？

我正在使用 jQuery 和 CSS:

<div id="main">
  <div id="hello">test</div>
  <div id="world">test</div>
</div>

Answer 1

考虑到您的jquery就绪，您可以使用hide、fadeOut 和fadeIn >

$('#world').hide();
$('#hello').fadeOut(function() {
  $('#world').fadeIn(function() {
     //do your stuff
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="hello">hello</div>
  <div id="world">world</div>
</div>

您甚至可以使用 display: none 属性在 css 中隐藏 world div，因为 $('#world').hide() 做完全相同的事情.

您可以通过提供持续时间参数来更改淡入淡出效果的持续时间:

var duration = 2000; //in milliseconds

$('#hello').fadeOut(duration, function() {
  $('#world').fadeIn(duration, function() {
    //do your stuff
  });
});

#world {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="hello">hello</div>
  <div id="world">world</div>
</div>

在此处阅读有关褪色的更多信息:
https://api.jquery.com/category/effects/fading/