鍍金池/ 教程/ HTML/ 淡入淡出效果
jQuery UI Tab 示例（一）
jQuery UI Datepicker 示例（四）
jQuery UI 示例
jQuery UI Slider 示例（二）
jQuery UI Dialog 示例（一）
HTML Get
動畫效果
終止動畫
回調函數(shù)
方法鏈
jQuery UI Button 示例（一）
jQuery UI Autocomplete 示例（三）
jQuery UI Autocomplete 示例（二）
設置或取得元素的 CSS class
jQuery UI 概述
基本語法
jQuery UI Datepicker 示例（一）
jQuery UI Autocomplete 示例（一）
jQuery UI Spiner 示例
jQuery UI Tab 示例（二）
淡入淡出效果
顯示/隱藏內容
HTML Set
jQuery UI Tooltip 示例
jQuery UI Slider 示例（一）
讀寫 HTML 元素的 css 屬性
jQuery UI Datepicker 示例（二）
添加HTML元素
操作 HTML 元素的大小
jQuery UI Datepicker 示例（五）
滑動效果
jQuery UI Dialog 示例（二）
jQuery UI Menu 示例
jQuery UI 基本工作過程
jQuery UI Button 示例（二）
jQuery UI Dialog 示例（三）
jQuery UI Datepicker 示例（三）
Selectors
jQuery UI Progressbar 示例
Events
jQuery UI Accordion 示例
刪除HTML元素

淡入淡出效果

jQuery 提供了下面幾種方法可以實現(xiàn)顯示的淡入淡出效果：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

fadeIn()方法

fadeIn()實現(xiàn)淡入效果，其基本語法如下：

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

可選參數(shù) speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個可選參數(shù)為回調函數(shù)，在 fadeIn()方法結束后調用。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()方法

fadeOut()實現(xiàn)淡出效果，其基本語法如下：

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

可選參數(shù) speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個可選參數(shù)為回調函數(shù)，在 fadeIn()方法結束后調用。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle()方法

fadeToggle()交替進行 fadeIn()和 fadeOut()，如果元素是淡出的，那么 fadeToggle()將淡入該元素，如果之前是淡入的，fadeToggle 將淡出該元素。

其基本語法如下：

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

可選參數(shù) speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個可選參數(shù)為回調函數(shù)，在 fadeIn()方法結束后調用。

下面例子，點擊按鈕之后，可以交替淡出淡入三個矩形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });
        });
    </script>
</head>
<body>

    <p>Demonstrate fadeToggle() with different speed parameters.</p>
    <button>Click to fade in/out boxes</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>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/3.png" alt="" />

fadeTo()方法

fadeTo()實現(xiàn)淡化到指定的透明度，其基本語法如下

$(selector).fadeTo(speed,opacity,callback);

必需參數(shù) speed 給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個必須參數(shù)為透明度，值域為0到1之間。

可選參數(shù)為回調函數(shù)，在 fadeIn()方法結束后調用。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});