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.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面