博客

jQuery fadeToggle()方法

  • Post category:jquery

当你想要使用 jQuery 来添加动画效果时，fadeToggle()方法是一个非常实用的方法。该方法可以用于淡入淡出隐藏元素，同时也可以实现淡入淡出显示元素。

一、方法介绍

fadeToggle()方法是 jQuery 中用于在元素的可见状态之间切换的方法。当元素是隐藏的，它将淡入显示。当元素是可见的时，它将淡出并隐藏。

该方法有一个参数：duration，表示动画执行的时间（以毫秒为单位）。如果不指定该参数，则默认值为400毫秒。

与其他的 jQuery 方法一样，fadeToggle()可以使用回调函数。在动画执行结束时，会触发回调函数，当然，你也可以指定一个回调函数来在动画期间执行任何其他需要执行的操作。

二、方法语法

fadeToggle()方法的基本语法如下所示：

$(selector).fadeToggle(duration, [callback]);

其中，参数 duration 表示动画执行的时间，单位是毫秒。该参数是可选的，默认值是400毫秒。而参数 callback 是动画执行完毕后的回调函数，同样是可选的。

三、示例说明

1. 淡入淡出显示/隐藏元素

下面是一个显示和隐藏一个图片的例子。当用户单击按钮时，图片将通过 fadeToggle() 方法在 显示/隐藏之间切换。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()方法示例</title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#img").fadeToggle();
            });
        });
    </script>
</head>
<body>
    <button id="btn">单击隐藏/显示图片</button>
    <br/><br/>
    <img id="img" src="https://picsum.photos/200/200" alt="隐藏的图片" style="display: none;">
</body>
</html>

在本示例中，需要将 jQuery 引入页面，用 $(document).ready() 方法把代码封装起来，使代码在页面加载完成后执行，当用户单击按钮时执行 fadeToggle() 方法，隐藏或显示图片。

2. 淡入淡出同时增加回调函数

fadeToggle() 还支持同时添加回调函数，可以在动画结束后执行其他操作。下面是一个实例，当用户单击按钮时，图片将通过 fadeToggle() 进行显示/隐藏操作，并以缓慢的速度淡出。在淡出结束后，将提示 “淡出动画已经停止”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()方法示例</title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#img").fadeToggle(2000, function(){
                    alert("淡出动画已经停止。");
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn">单击隐藏/显示图片</button>
    <br/><br/>
    <img id="img" src="https://picsum.photos/200/200" alt="隐藏的图片" style="display: none;">
</body>
</html>

在本示例中，使用了 fadeToggle(2000, function(){}) 添加了回调函数。当动画执行结束后，将弹出一个提示框。

Tags: