jQuery带有三种方便的方法来轻松创建褪色效果。
- fadeIn（）–显示匹配的元素并具有淡入效果。
- fadeOut（）–隐藏具有淡入/透明效果的匹配元素。
- fadeTo（）–使匹配的元素淡入某些不透明度。
以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。 如果省略此参数，则默认为400毫秒。
自己尝试
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.fadeOutbox, .fadeInbox, .fadeTobox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1>
<div class="clear">
<h2>fadeOut() example</h2>
<div class="fadeOutbox">
Click me - fadeOut()
</div>
<div class="fadeOutbox">
Click me - fadeOut()
</div>
</div>
<div class="clear">
<h2>fadeIn() example</h2>
<div class="fadeInbox">
Click me - fadeIn()
</div>
<div class="fadeInbox">
Click me - fadeIn()
</div>
</div>
<div class="clear">
<h2>fadeTo() example</h2>
<div class="fadeTobox">
Click me - fadeTo()
</div>
<div class="fadeTobox">
Click me - fadeTo()
</div>
</div>
<div class="clear">
<button id=reset>Reset</button>
</div>
<script type="text/javascript">
$(".fadeOutbox").click(function () {
$(this).fadeOut('slow');
});
$(".fadeInbox").click(function () {
$(this).hide().fadeIn(2000);
});
$(".fadeTobox").click(function () {
$(this).fadeTo('fast',0.2);
});
$("#reset").click(function(){
location.reload();
});
</script>
</body>
</html>翻译自: https://mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/