jQuery效果：显示和隐藏

jQueryshow()和hide()方法

您可以使用 jQueryshow()和hide()方法显示和隐藏HTML元素。

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

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

您可以选择指定持续时间(也称为速度)参数，以使 jQuery 显示隐藏效果在指定时间段内进行动画处理。

可以使用预定义的字符串'slow'或'fast'或以毫秒数之一来指定持续时间，以获得更高的精度;较高的值表示较慢的动画。

<script>
$(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>

您还可以指定在or方法完成后要执行的回调函数。show()hide()

<script>
$(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>

jQuerytoggle()方法

jQuerytoggle()方法显示或隐藏元素，如果元素最初显示，它将被隐藏;如果隐藏，它将被显示(即切换可见性)。

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

类似地，您可以为方法指定持续时间参数，toggle()使其像show()和hide()方法一样具有动画效果。

<script>
$(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>
$(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效果：显示和隐藏”的介绍，大家如果想了解更多相关知识，可以来关注一下极悦的jQuery视频教程，里面的课程内容很详细，由浅到深，通俗易懂，适合没有基础的小伙伴学习，希望对大家能够有所帮助。