jQuery fadeToggle() 方法

jQuery 的fadeToggle() 方法用於透過淡入淡出切換所選元素的可見性。如果元素可見，則淡出；如果元素隱藏，則淡入。

語法

以下是 fadeToggle() 方法的語法：

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

引數

以下是上述語法的描述：

speed: 指定動畫持續時間（以毫秒為單位或為字串“slow”或“fast”）。如果省略，則預設持續時間為 400 毫秒。
easing: 定義過渡的緩動函式，例如“swing”或“linear”。此引數會影響動畫的速度。如果省略，則預設為“swing”。
callback: 動畫完成後要執行的函式。此函式在淡入或淡出效果完成後執行。

示例 1

在下面的示例中，我們使用了沒有引數的 jQuery fadeToggle() 方法。單擊按鈕將切換 #myElement div 的可見性：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle();
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Default)</button>
    <div id="myElement"></div>
</body>
</html>

執行後，div 將以預設持續時間和緩動效果淡入或淡出。

示例 2

在這裡，fadeToggle() 方法使用“slow”引數指定持續時間。單擊按鈕將以緩慢的淡出效果切換 #myElement div 的可見性：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle("slow");
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Slow)</button>
    <div id="myElement"></div>
</body>
</html>

執行後，單擊按鈕時，div 將緩慢淡入或淡出。

示例 3

fadeToggle() 方法使用 1000 毫秒的持續時間和“linear”緩動效果。單擊按鈕將以線性淡出效果切換 #myElement div 的可見性：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle(1000, "linear");
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Linear)</button>
    <div id="myElement"></div>
</body>
</html>

執行後，單擊按鈕時，div 將在 1000 毫秒內以線性緩動效果淡入或淡出。

示例 4

fadeToggle() 方法使用 500 毫秒的持續時間和一個回撥函式。單擊按鈕將切換 #myElement div 的可見性，並在淡出轉換完成後顯示一個警報：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle(500, function() {
                    alert("Fade transition completed!");
                });
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Callback)</button>
    <div id="myElement"></div>
</body>
</html>

執行後，div 將在 500 毫秒內淡入或淡出，並且淡出轉換完成後將出現一條警報訊息。

jquery_ref_effects.htm

列印頁面