📌  相关文章
📜  JQuery 中的 fadeToggle() 方法的目的是什么？(1)

📅  最后修改于: 2023-12-03 15:02:14.536000             🧑  作者: Mango

JQuery 中的 fadeToggle() 方法的目的是什么？

简介

JQuery 中的 fadeToggle() 方法用于在元素的淡入淡出效果和显示隐藏效果之间进行切换。该方法既可以实现元素的淡入淡出效果，也可以实现元素的显示隐藏效果。

语法

fadeToggle() 方法的语法如下：

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

参数说明：

  • selector：必需，需要进行淡入淡出或显示隐藏效果的元素。
  • speed：可选，动画的速度，可选值为 "slow"、"fast" 或以毫秒为单位的数字。
  • easing：可选，指定要使用哪种效果来完成动画。默认是 "swing"。
  • callback：可选，动画完成后所执行的函数名称。
示例
案例一：元素的淡入淡出效果

让一个 div 元素实现淡入淡出效果，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>fadeToggle()方法简介 - 示例一</title>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>
    <button id="btnFadeToggle">淡入淡出</button>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnFadeToggle").click(function(){
                $("#myDiv").fadeToggle();
            });
        });
    </script>
</body>
</html>

效果如下：

fadeToggle()方法简介 - 示例一

在上面的示例中，当点击"淡入淡出"按钮时，myDiv 元素就会实现淡入淡出效果。

案例二：元素的显示隐藏效果

让一个 p 元素实现显示隐藏效果，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>fadeToggle()方法简介 - 示例二</title>
</head>
<body>
    <p>这是一个段落。</p>
    <button id="btnFadeToggle">显示/隐藏</button>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnFadeToggle").click(function(){
                $("p").fadeToggle();
            });
        });
    </script>
</body>
</html>

效果如下：

fadeToggle()方法简介 - 示例二

在上面的示例中，当点击"显示/隐藏"按钮时，p 元素就会实现显示隐藏效果。

总结
  • fadeToggle() 方法可用于实现元素的淡入淡出效果和显示隐藏效果之间的切换。
  • 通过设置 speed 和 easing 参数，可以控制动画的速度和效果。
  • 通过设置 callback 参数，可以在动画完成后执行相应的函数。