当前位置：首页 > jquery

jquery 显示

2026-03-02 10:23:29jquery

jQuery 显示元素的方法

jQuery 提供了多种方法来显示隐藏的元素。以下是一些常用的方法：

使用 show() 方法 show() 是最简单的方法，用于显示被隐藏的元素。可以不带参数，也可以指定动画的持续时间和回调函数。

jquery 显示

$("#element").show();

使用 fadeIn() 方法 fadeIn() 通过淡入效果显示元素，可以指定动画时间和回调函数。

$("#element").fadeIn();

使用 slideDown() 方法 slideDown() 通过向下滑动效果显示元素，适用于隐藏的元素具有 display: none 或 height: 0 的情况。

jquery 显示

$("#element").slideDown();

使用 css() 方法 通过直接修改 CSS 的 display 属性来显示元素。

$("#element").css("display", "block");

显示元素的注意事项

如果元素是通过 hide() 或 fadeOut() 隐藏的，show() 或 fadeIn() 可以还原其原始状态。
对于通过 display: none 隐藏的元素，show() 会将其恢复为默认的 display 值（如 block、inline 等）。
动画效果可以通过参数控制，例如 show(500) 表示在 500 毫秒内完成显示动画。

示例代码

以下是一个完整的示例，展示如何使用 jQuery 显示元素：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Show Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="showBtn">Show Box</button>

    <script>
        $("#showBtn").click(function() {
            $("#box").show(500);
        });
    </script>
</body>
</html>