我有 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>
最佳答案
考虑到您的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/
关于jquery - 如何使用 jQuery 和 CSS 隐藏和淡化 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35354985/