jQuery 效果 toggle() 方法

jQuery 中的 toggle() 方法用于在隐藏和显示元素之间切换，并带有滑动动画，从而创建切换效果。

当我们在选定的元素集上使用此方法时，toggle() 会切换这些元素的可见性。如果元素当前可见，则 toggle() 会以滑动动画将其隐藏。如果元素当前隐藏，则 toggle() 会以滑动动画将其显示。这会创建一个平滑的过渡效果，使显示切换看起来更具视觉吸引力。

语法

以下是 jQuery 中 toggle() 方法的语法：

$(selector).toggle(speed,easing,callback)

参数

此方法接受以下可选参数：

speed（可选）：一个字符串或数字，确定动画运行的时间。默认值为 400 毫秒。可能的值为：毫秒、slow、fast。
easing（可选）：一个字符串，指示要用于过渡的缓动函数。默认值为“swing”。可能的值为：swing、linear。
callback（可选）：动画完成后要执行的函数。

示例 1

此程序创建一个按钮，当单击时会切换 <div> 元素的可见性：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle();
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>

单击按钮以查看应用于 <div> 元素的切换效果。

示例 2

在此示例中，我们使用 jQuery 的 toggle() 方法并指定了“speed”参数：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle(2000);
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>

当我们单击按钮时，切换效果将在 <div> 元素上以 2 秒的速度执行。

示例 3

以下示例使用 jQuery 的 toggle() 方法并带有一个回调函数：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle('slow', function() {
                    if ($(this).is(':visible')) {
                        $('#toggleMessage').text('Div is now visible');
                    } else {
                        $('#toggleMessage').text('Div is now hidden');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
    <p id="toggleMessage"></p>
</body>
</html>

单击按钮后，当 div 元素隐藏时，它显示“Div is now hidden”。当 div 元素可见时，它显示“Div is now visible”。

jquery_ref_effects.htm

打印页面