jQuery 效果 - 淡入淡出

jQuery Fading 方法

透過 jQuery,您可以實現元素的淡入淡出效果。

jQuery 有以下四種fade 方法:

fadeIn()

fadeOut()

fadeToggle()

#fadeTo()


fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

語法:

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時間長度。它可以取以下值:"slow"、"fast" 或毫秒。 .

可選的 callback 參數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(4000);
  });
});
</script>
</head>
<body>
<button>点击淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

fadeOut() 方法

jQuery fadeOut() 方法用來淡出可見元素。

語法:

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的長度。它可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(5000);
  });
});
</script>
</head>
<body>
<button>点击淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeOut() 方法

jQuery fadeOut() 方法用來淡出可見元素。

語法:

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的長度。它可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(4000);
  });
});
</script>
</head>
<body>
<button>点击淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出,則 fadeToggle() 會在元素中加入淡入效果。

如果元素已淡入,則 fadeToggle() 會在元素中加入淡出效果。

語法:

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時間長度。它可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(4000);
    });
});
</script>
</head>
<body>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> .big{ font-size:30px; color:#FF0000;} </style> </head> <body> <script> function fadeIn(){ $("#popup").fadeIn(2000); $("#popup").css("position","absolute"); $("#popup").css("left","100px"); $("#popup").css("top","100px"); } function fadeOut(){ $("#popup").fadeOut(2000); } function fadeTo(){ $("#popup").fadeTo(2000,0.5); } </script> <input type="button" value="弹出层" onclick="fadeIn()" > <div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;"> 弹出层的试验 <br> <input type="button" value="取消" onclick="fadeOut()" > <input type="button" value="半透明" onclick="fadeTo()" > </div> </body> </html>