JQuery: JQuery效果（隱藏、顯示、切換，滑動，淡入淡出，以及動畫）

本文轉載自查看原文 2016-09-19 00:15 4322 JQuery

JQuery：效果
JQuery效果有很多，包括隱藏、顯示、切換，滑動，淡入淡出，以及動畫等。
隱藏：JQuery hide()

顯示：JQuery show()

切換：JQuery toggle(）

淡入淡出：JQuery fadeIn()、JQuery fadeOut()、JQuery fadeToggle()、JQuery fadeTo()

滑動：JQuery slideDown()、JQuery slideUP()、JQuery slideToggle()

動畫：JQuery animation()

范例1：給出兩個按鈕，點擊"顯示",通過hide()方法，p標簽隱藏；點擊"隱藏",通過show()方法,p標簽顯示。
$("#hide").click(function(){
　　$("p").hide();
});
$("#show").click(function(){
　　$("p").show();
});
代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //隱藏
            $("#hide").click(function(){
                $("#p1").hide();
            });
            
            //顯示
            $("#show").click(function(){
                $("#p1").show();
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide">隱藏</button>
        <button id="show">顯示</button>
    </div>
</body>
</html>

View Code

其實，上面的hide和show方法中還可以添加參數，用來規定隱藏/顯示的速度，以及執行結束后的操作
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //隱藏
            $("#hide").click(function(){
                $("#p1").hide(1000,function(){  //1秒的時間p隱藏，隱藏后彈出信息
                    alert("好了，p被隱藏了");
                });
            });
            
            //顯示
            $("#show").click(function(){
                $("#p1").show(1000,function(){ //1秒的時間p顯示，顯示后彈出信息
                    alert("好了，p被顯示了");
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide">隱藏</button>
        <button id="show">顯示</button>
    </div>
</body>
</html>

View Code

范例2：通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：
$("button").click(function(){
　　$("p").toggle();
});
其實，上面的toggle()方法中還可以添加參數，$(selector).toggle(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 toggle() 方法完成后所執行的函數名稱。
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //隱藏或者顯示（切換）
            $("#hide_show").click(function(){
                $("#p1").toggle(1000);
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide_show">隱藏/顯示</button>
    </div>
</body>
</html>

View Code

范例3：通過 jQuery，您可以實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
·3-1：
jQuery fadeIn() 用於淡入已隱藏的元素。
$(selector).fadeIn(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。.
可選的 callback 參數是 fading 完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeIn() 方法：

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

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(1000);
                $("#div4").fadeIn(1000,function(){
                    $(this).css("background-color","black");
                });
            });
        });
    </script>
</head>
<body>
    <div><button>點擊后,div會淡入</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
    <div id="div4" style="width:80px;height:80px;display:none;background-color:blue"></div>
</body>
</html>

View Code

·3-2：
jQuery fadeOut() 方法用於淡出可見元素。
$(selector).fadeOut(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeOut() 方法：
$("button").click(function(){
　　$("#div1").fadeOut();
　　$("#div2").fadeOut("slow");
　　$("#div3").fadeOut(1000);
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡出
            $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(1000);
            });
        });
    </script>
</head>
<body>
    <div><button>點擊后,div會淡出</button></div>
    <div id="div1" style="width:80px;height:80px;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;background-color:purple"></div>
</body>
</html>

View Code

·3-3：
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
語法:$(selector).fadeToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeToggle() 方法：
$("button").click(function(){
　　$("#div1").fadeToggle();
　　$("#div2").fadeToggle("slow");
　　$("#div3").fadeToggle(3000);
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入或者淡出（切換）
            $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div><button>點擊后,div淡入/淡出</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
</body>
</html>

View Code

·3-4：
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
語法：$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 參數是該函數完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeTo() 方法：
$("button").click(function(){
　　$("#div1").fadeTo("slow",0.15);
　　$("#div2").fadeTo("slow",0.4);
　　$("#div3").fadeTo("slow",0.7);
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入（給出透明度的漸變），淡出時同理
            $("button").click(function(){
                $("#div1").fadeTo("slow",0.15);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
            });
        });
    </script>
</head>
<body>
    <div><button>點擊后,div淡入時透明度漸變</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
</body>
</html>

View Code

范例4：通過 jQuery，您可以在元素上創建滑動效果。

jQuery 擁有以下滑動方法：slideDown()、slideUp()、slideToggle()
·4-1：
jQuery slideDown() 方法用於向下滑動元素。
語法:$(selector).slideDown(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成后所執行的函數名稱。
下面的例子演示了 slideDown() 方法：
$("#flip").click(function(){
　　$("#panel").slideDown();
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //滑下面板
            $("#flip").click(function(){
                $("#panel").slideDown("slow");
            });
        });
    </script>
    <style type="text/css">
        #panel,#flip{
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel{
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
    <div id="flip">點擊后,滑下面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>

View Code

·4-2：
jQuery slideUp() 方法用於向上滑動元素。
語法:$(selector).slideUp(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成后所執行的函數名稱。
下面的例子演示了 slideUp() 方法：
$("#flip").click(function(){
　　$("#panel").slideUp();
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //收起面板
            $("#flip").click(function(){
                $("#panel").slideUp("slow");
            });
        });
    </script>
    <style type="text/css">
        #panel,#flip{
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel{
            padding:50px;
        }
    </style>
</head>
<body>
    <div id="flip">點擊后,收起面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>

View Code

·4-3：
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成后所執行的函數名稱。
下面的例子演示了 slideToggle() 方法：
$("#flip").click(function(){
　　$("#panel").slideToggle();
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //收起面板
            $("#flip").click(function(){
                $("#panel").slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        #panel,#flip{
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel{
            padding:50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="flip">點擊后,滑出或者收起面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>

View Code

范例5：jQuery 動畫 - animate() 方法
·5-1：
jQuery animate() 方法用於創建自定義動畫。
語法：$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成后所執行的函數名稱。
下面的例子演示 animate() 方法的簡單應用。它把 <div> 元素往右邊移動了 250 像素：
實例
$("button").click(function(){
　　$("div").animate({left:'250px'});
});

提示：默認情況下，所有的HTML都是靜態定位，且無法移動。如果要進行位置操作，要將CSS的position屬性設置為relative、fixed或者absolute。

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div右移250px
            $("button").click(function(){
                $("div").animate({left:'250px'});
            });
        });
    </script>
</head>
<body>
    <button>點擊后div右移250像素</button><br>
    <div style="width:80px;height:80px;background-color:blue;position:absolute"></div>
</body>
</html>

View Code

·5-2：
請注意，生成動畫的過程中可同時使用多個屬性：
$("button").click(function(){
　　$("div").animate({
　　　　left:'250px',
　　　　opacity:'0.5',
　　　　height:'150px',
　　　　width:'150px'
　　});
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //動畫時操作多個屬性
            $("button").click(function(){
                  $("div").animate({
                      left:'250px',
                      opacity:'0.5',
                      height:'150px',
                      width:'150px'
                });
            });
        });
    </script>
</head>
<body>
    <button>開始動畫</button>
    <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 
    如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

View Code

注意：

可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在核心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 jquery.com 下載 Color Animations 插件。

·5-3：

jQuery animate() - 使用相對值
也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
　　$("div").animate({
　　　　left:'250px',
　　　　height:'+=150px',
　　　　width:'+=150px'
　　});
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //動畫時使用相對值
            $("button").click(function(){
                 $("div").animate({
                    left:'250px',
                    height:'+=150px',
                    width:'+=150px'
              });
            });
        });
    </script>
</head>
<body>
    <button>開始動畫</button>
    <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 
    如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

View Code

·5.4：
jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：
$("button").click(function(){
　　$("div").animate({
　　　　height:'toggle'
　　});
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //動畫時使用相對值
            $("button").click(function(){
                  $("div").animate({
                    height:'toggle'
                  });
            });
        });
    </script>
</head>
<body>
    <button>開始動畫</button>
    <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 
    如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

View Code

·5-5：
jQuery animate() - 使用隊列功能
默認地，jQuery 提供針對動畫的隊列功能。
這意味着如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的"內部"隊列。然后逐一運行這些 animate 調用。
$("button").click(function(){
　　var div=$("div");
　　div.animate({height:'300px',opacity:'0.4'},"slow");
　　div.animate({width:'300px',opacity:'0.8'},"slow");
　　div.animate({height:'100px',opacity:'0.4'},"slow");
　　div.animate({width:'100px',opacity:'0.8'},"slow");
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //動畫時使用相對值
            $("button").click(function(){
                var div=$("div");
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
            });
        });
    </script>
</head>
<body>
    <button>開始動畫</button>
    <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 
    如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

View Code

下面的例子把 <div> 元素往右邊移動了 100 像素，然后增加文本的字號：
$("button").click(function(){
　　var div=$("div");
　　div.animate({left:'100px'},"slow");
　　div.animate({fontSize:'3em'},"slow");
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //動畫時使用相對值
            $("button").click(function(){
                var div=$("div");
                div.animate({left:'100px'},"slow");
                div.animate({fontSize:'3em'},"slow");
            });
        });
    </script>
</head>
<body>
    <button>開始動畫</button>
    <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 
    如果需要改變為，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">HELLO</div>
</body>
</html>

View Code

范例6：jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。
jQuery stop() 滑動
jQuery stop() 動畫(帶參數)
·6-1：
jQuery stop() 方法
jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
語法:$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
下面的例子演示 stop() 方法，不帶參數：
$("#stop").click(function(){
　　$("#panel").stop();
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.js">
    </script>
    <script> 
        $(document).ready(function(){
          $("#flip").click(function(){
            $("#panel").slideDown(5000);
          });
          $("#stop").click(function(){
            $("#panel").stop();
          });
        });
    </script>
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑動</button>
<div id="flip">點我向下滑動面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

View Code

范例7：jQuery Callback方法，Callback 函數在當前動畫 100% 完成之后執行。
許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。
例子：$("p").hide("slow")
speed 或 duration 參數可以設置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。
以下實例在隱藏效果完全實現后回調函數:
使用 callback 實例
$("button").click(function(){
　　$("p").hide("slow",function(){
　　alert("The paragraph is now hidden");
　　});
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.js"></script>

    <script>
        $(function(){
            $("#hide").click(function(){
                $("p").hide("shlow",function(){
                    alert("The paragraph is now hidden");
                });
            });
        });
    </script>
</head>
<body>
    <button id="hide">隱藏</button>
    <p>點擊“隱藏”按鈕，我就被隱藏了！</p>
</body>
</html>

View Code

以下實例沒有回調函數，警告框會在隱藏效果完成前彈出：
$("button").click(function(){
　　$("p").hide(1000);
　　alert("The paragraph is now hidden");
});
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.js"></script>

    <script>
        $(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
　　            alert("The paragraph is now hidden");
            });
        });
    </script>
</head>
<body>
    <button id="hide">隱藏</button>
    <p>點擊“隱藏”按鈕，我就被隱藏了！</p>
</body>
</html>

View Code

范例8：jQuery - Chaining，方法鏈接。
通過 jQuery，可以把動作/方法鏈接在一起。
Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）。
直到現在，我們都是一次寫一條 jQuery 語句（一條接着另一條）。
不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接着另一條。
提示：這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
下面例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變為紅色，然后向上滑動，再然后向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.js"></script>

    <script>
        $(function(){
            $("button").click(function(){
                $("p").css("color","red").slideUp(2000).slideDown(2000);
            });
        });
    </script>
</head>
<body>
    <button>點擊</button>
    <p>鏈接方法</p>
</body>
</html>

View Code

如果需要，我們也可以添加多個方法調用。
提示：當進行鏈接時，代碼行會變得很差。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮進。
如下書寫也可以很好地運行：
$("#p1").css("color","red")

　　.slideUp(2000)

　　.slideDown(2000);
代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.js"></script>

    <script>
        $(function(){
            $("button").click(function(){
                $("p").css("color","red")
                    .slideUp(2000)
                    .slideDown(2000);
            });
        });
    </script>
</head>
<body>
    <button>點擊</button>
    <p>鏈接方法</p>
</body>
</html>

View Code

說明：jQuery 會拋掉多余的空格，並當成一行長代碼來執行上面的代碼行。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery效果：隱藏、顯示、切換、滑動、淡入淡出、動畫 jquery效果- 顯示和隱藏淡入淡出滑動隱藏 JQuery效果-淡入淡出、滑動、動畫 JQuery {(顯示隱藏),(向上向下滑動),(淡入淡出),(自定義動畫效果)} jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換） jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換） jQuery中的動畫效果(淡入淡出) JQuery 淡出、動畫、顯示/隱藏切換等效果 android動畫切換（淡入淡出效果）實例 Javascript-- jQuery動畫篇(淡入淡出效果)