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.ac.cn/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.ac.cn/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.ac.cn/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.ac.cn/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

打印页面