jQuery淡入淡出,fadeIn(),fadeOut(),fadeToggle(),fadeTo()
- fadeIn():用于淡入已隐藏的元素。
- fadeOut() 方法用于淡出可见元素。
- fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
- fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
div{
width: 80px;
height: 80px;
/* display: none; */
}
#div1{
background-color: red;
}
#div2{
background-color: green;
}
#div3{
background-color: greenyellow;
}
</style>
<script>
// 淡入
// $(document).ready(function() {
// $("button").click(function() {
// $("#div1").fadeIn();
// $("#div2").fadeIn("slow");
// $("#div3").fadeIn(3000);
// })
// })
// 淡出
// $(document).ready(function() {
// $("button").click(function() {
// $("#div1").fadeOut();
// $("#div2").fadeOut("slow");
// $("#div3").fadeOut(3000);
// })
// })
// 淡入/淡出
// $(document).ready(function(){
// $("button").click(function(){
// $("#div1").fadeToggle();
// $("#div2").fadeToggle("slow");
// $("#div3").fadeToggle(3000);
// });
// });
// 颜色减淡
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
})
})
</script>
</head>
<body>
<!--
<button>点击淡入div元素。</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div> -->
<!--
<button>点击淡出div元素。</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div> -->
<!--
<button>点击淡入/淡出</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div> -->
<button>点击颜色变淡</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
</body>
</html>