jQuery(5)——jQuery fade淡入淡出效果
阿新 • • 發佈：2018-10-01
selector src 以及 clas jquery 定義 rip use 使用
jQuery fade淡入淡出效果
淡入淡出效果是基於透明度的變換而實現的。在測試demo的時候可以在控制臺查看elements中的opacity的變換
在jQuery中可以通過四個方法來實現元素的淡入淡出，這四個方法分別是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()
語法
$(selector).fadeXXX(speed,callback);他們都可以有兩個可選參數：
- 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
- 可選的 callback 參數是 fading 完成後所執行的函數名稱。
demo:
//fadeOut、fadeIn $("#btn").click( function(){ $("#show").fadeOut("slow", function(){ //callback() $("#show").fadeIn("slow"); } ); } )
fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。demo:
//fadeToggle $("#btn2").click( function(){ $("#show2").fadeToggle(); } )
fadeTo()
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。fadeTo()除了擁有兩個可選參數外，還有一個必選參數opacity.
語法：
$(selector).fadeTo(speed,opacity,callback);fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。
demo:
//fadeTo
//$(selector).fadeTo(speed,opacity,callback)
$("#btn3").click(
function(){
$("#show3").fadeTo("slow",0.5);
}
)測試demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery fade淡入淡出效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
//fadeOut、fadeIn
$("#btn").click(
function(){
$("#show").fadeOut("slow",
function(){ //callback()
$("#show").fadeIn("slow");
}
);
}
)
//fadeToggle
$("#btn2").click(
function(){
$("#show2").fadeToggle();
}
)
//fadeTo
//$(selector).fadeTo(speed,opacity,callback)
$("#btn3").click(
function(){
$("#show3").fadeTo("slow",0.5);
}
)
})
</script>
<style>
.box{
width: 300px;
margin:0 auto;
border: 2px solid green;
}
#show,#show2,#show3{
width:296px;
height: 100px;
margin:0 auto;
border: 2px solid red;
background-color: rgb(250, 205, 80);
}
</style>
</head>
<body>
<div class="box">
<input type="button" id="btn" value="淡出+淡入">
<div id="show">
</div>
</div>
<div class="box">
<input type="button" id="btn2" value="toggle 自行判斷使用">
<div id="show2">
</div>
</div>
<div class="box">
<input type="button" id="btn3" value="fadeTo可自定義要達到的透明度">
<div id="show3">
</div>
</div>
</body>
</html>demo預覽
See the Pen jQuery淡入淡出 by 練濤 (@liantao) on CodePen.
jQuery(5)——jQuery fade淡入淡出效果