[jQuery] 效果:Slide滑動效果

[jQuery] 效果:Slide滑動效果

Slide()

jQuery的Slide方法可以在HTML中製造滑動的效果。

Slide方法:

  • slideDown() : 往下滑動。

  • slideUp() : 往上滑動。

  • slideToggle() : 轉換上下滑動效果。

 

slideDown()

slideDown()方法能夠將HTML元素做向下滑動的效果。

語法:

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

speed參數指定持續時間,即效果的速度。參數可為"slow""fast"或自行設定毫秒。

callback參數是一個function,執行於slideDown()方法執行完畢後,避免執行其他效果時發生錯誤。

slideDown()範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#header").click(function () {
                $("#body").slideDown("slow");
            });
        });
    </script>

    <style>
        #header, #body {
        padding:5px;
        text-align:center;
        background-color:lightgreen;
        border:solid 1px #c3c3c3;
        }

        #body {
        display:none;
        }
    </style>

</head>
<body>

    <div id="header">點擊</div>
    <div id="body">Hello World</div>

</body>
</html>

<style></style>
設定div的CSS,其中<div id="body">display:none預設隱藏。

$(document).ready(function () { } ); 
HTML載入完畢後才執行function,避免找不到HTML元素。

$("#header").click(function () { } );
id="header"的HTML元素加上click事件與執行function。

$("#body").slideDown("slow");
id="body"的HTML元素執行slideDown()方法,向下滑出元素,指定效果速度為"slow"

 

初始畫面:

 

按下點擊,向下滑出隱藏的<div id="body">:

 

slideUp()

slideUp()方法能夠將HTML元素做向上滑動的效果。

語法:

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

speed參數指定持續時間,即效果的速度。參數可為"slow""fast"或自行設定毫秒。

callback參數是一個function,執行於slideUp()方法執行完畢後,避免執行其他效果時發生錯誤。

slideUp()範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#header").click(function () {
                $("#body").slideUp("slow");
            });
        });
    </script>

    <style>
        #header, #body {
        padding:5px;
        text-align:center;
        background-color:lightgreen;
        border:solid 1px #c3c3c3;
        }

    </style>

</head>
<body>

    <div id="header">點擊</div>
    <div id="body">Hello World</div>

</body>
</html>

<style></style>
設定div的CSS。

$(document).ready(function () { } ); 
HTML載入完畢後才執行function,避免找不到HTML元素。

$("#header").click(function () { } );
id="header"的HTML元素加上click事件與執行function。

$("#body").slideUp("slow");
id="body"的HTML元素執行slideUp()方法,向上隱藏元素,指定效果速度為"slow"

 

初始畫面:

 

按下點擊,向上隱藏<div id="body">:

 

slideToggle()

slideToggle()方法能夠在 slideDown()與slideUp()方法間做切換。

若HTML元素已經向下滑動顯示,slideToggle()便會向上滑動隱藏。

若HTML元素已經向上滑動隱藏,slideToggle()便會向下滑動顯示。

語法:

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

speed參數指定持續時間,即效果的速度。參數可為"slow""fast"或自行設定毫秒。

callback參數是一個function,執行於slideToggle()方法執行完畢後,避免執行其他效果時發生錯誤。

slideToggle()範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#header").click(function () {
                $("#body").slideToggle("slow");
            });
        });
    </script>

    <style>
        #header, #body {
        padding:5px;
        text-align:center;
        background-color:lightgreen;
        border:solid 1px #c3c3c3;
        }

        #body {
        display:none;
        }
    </style>

</head>
<body>

    <div id="header">點擊</div>
    <div id="body">Hello World</div>

</body>
</html>

<style></style>
設定div的CSS,其中<div id="body">display:none預設隱藏。

$(document).ready(function () { } ); 
HTML載入完畢後才執行function,避免找不到HTML元素。

$("#header").click(function () { } );
id="header"的HTML元素加上click事件與執行function。

$("#body").slideToggle("slow");
id="body"的HTML元素執行slideToggle()方法,切換 slideDown()與slideUp(),指定效果速度為"slow"

 

若HTML元素已經向上滑動隱藏,slideToggle()便會向下滑動顯示:

 

若HTML元素已經向下滑動顯示,slideToggle()便會向上滑動隱藏:

 

 END 

回目錄