第六节 jQuery之效果篇-优快云博客

本文介绍如何使用jQuery实现网页元素的显示、隐藏、淡入及淡出效果，通过按钮点击触发，使页面元素以不同的方式呈现，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示与隐藏

hide()
show()
toggle()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>显示与隐藏</title>
</head>

<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="show_hide">显示与隐藏</button>
    <p>显示与隐藏</p>
    <script type="text/javascript">
        $("#show").click(function () {
            $("p").show();
        });
        $("#hide").click(function () {
            $("p").hide();
        });
        $("#show_hide").click(function () {
            $("p").toggle();
        });   
    </script>
</body>

</html>

淡入与淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>显示与隐藏</title>
</head>

<body>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <button id="fadeToggle">淡入与淡出</button>
    <button id="fadeTo">透明度</button>
    <p>淡入与淡出</p>
    <script type="text/javascript">
        $("#fadeIn").click(function () {
            $("p").fadeIn();
        });
        $("#fadeOut").click(function () {
            $("p").fadeOut();
        });
        $("#fadeToggle").click(function () {
            $("p").fadeToggle();
        });
        $("#fadeTo").click(function () {
            $("p").fadeTo("slow",0.5);
        });   
    </script>
</body>

</html>