jQuery 滑動效果

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 建立滑動效果。

jQuery `slideUp()` 和 `slideDown()` 方法

jQuery slideUp() 和 slideDown() 方法用於通過逐漸減小或增加其高度來隱藏或顯示 HTML 元素（即通過向上或向下滑動）。

<script type="text/javascript">
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

與其他 jQuery 效果方法一樣，你可以選擇指定 slideUp() 和 slideDown() 方法的持續時間或速度引數來控制幻燈片動畫的執行時間。可以使用預定義的字串之一 'slow' 或者 'fast' 以毫秒為單位指定持續時間 ; 值越高表示動畫越慢。

<script type="text/javascript">
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

你還可以指定在 slideUp() 或 slideDown() 方法完成後執行的回撥函式。我們將在後續章節中詳細瞭解回撥函式。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

jQuery `slideToggle()` 方法

jQuery slideToggle() 方法通過動畫高度來顯示或隱藏所選元素，如果元素最初顯示，它將向上滑動; 如果隱藏，它將向下滑動，即在 slideUp() 和 slideDown() 方法之間切換。

<script type="text/javascript">
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

類似地，可以指定持續時間引數 slideToggle() 等方法 slideUp() 和 slideDown() 方法來控制滑動動畫的速度。

<script type="text/javascript">
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

同樣，你也可以為 slideToggle() 方法指定回撥函式。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

jQuery slideUp() 和 slideDown() 方法

jQuery slideToggle() 方法

jQuery `slideUp()` 和 `slideDown()` 方法

jQuery `slideToggle()` 方法