jQuery 显示和隐藏效果

Created: October-14, 2018

在本教程中，你将学习如何使用 jQuery 显示隐藏 HTML 元素。

jQuery `show()` 和 `hide()` 方法

你可以使用 jQuery show() 和 hide() 方法显示和隐藏 HTML 元素。

hide() 方法只是为所选元素设置内联样式 display: none 。相反，show() 方法将匹配的元素集的显示属性恢复为它们最初的任何内容 - 通常是块，内联或内联块 - 在内联样式 display: none 应用于它们之前。这是一个例子。

<script type="text/javascript">
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

你可以选择指定持续时间（也称为速度）参数，以便在指定的时间段内对 jQuery show hide 效果进行动画处理。

持续时间可以使用预定义的字符串中的一个来指定 'slow' 或者 'fast' ，或在若干毫秒，对于更高的精度的; 值越高表示动画越慢。

<script type="text/javascript">
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

注意： 速度或持续时间字符串 'fast' 表示 200 毫秒的持续时间，而字符串 'slow' 表示 600 毫秒的持续时间。

你还可以指定在 show() 或 hide() 方法完成后执行的回调函数。我们将在后续章节中详细了解回调函数。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

jQuery `toggle()` 方法

jQuery toggle() 方法以这样的方式显示或隐藏元素：如果元素最初显示，它将被隐藏; 如果隐藏，它将被显示（即切换可见性）。

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

同样，你可以为 toggle() 方法指定持续时间参数，使其像 show() 和 hide() 方法一样进行动画处理。

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

同样，你也可以为方法指定回调函数 toggle() 。

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

jQuery show() 和 hide() 方法

jQuery toggle() 方法

jQuery `show()` 和 `hide()` 方法

jQuery `toggle()` 方法