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()` 方法