如何使用jquery和css隐藏和淡化div

Question

我有一个下面的HTML,我想让这些下面的div显示在彼此之上,"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

你可以使用hide,fadeOut并fadeIn考虑你jquery的ready

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

你甚至可以用css使用display: none属性隐藏世界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>

了解更多关于fading这里:https:
//api.jquery.com/category/effects/fading/