博客

jQuery fadeTo()方法

  • Post category:jquery

当我们想要在网页中实现元素的淡入淡出效果时，可以使用 jQuery 的 fadeTo() 方法。下面是这个方法的详细攻略：

简介

jQuery fadeTo() 方法用于将选定的元素逐渐地淡出/淡入到一个给定的不透明度（ opacity ）。

语法

$(selector).fadeTo(speed, opacity, callback);

参数说明：

  • speed：表示动画的时长，可以是毫秒数或者字符串 slow/fast（分别表示 600ms 和 200ms）；
  • opacity：表示目标元素的不透明度，范围在 0 和 1 之间；
  • callback：表示可选的回调函数，当动画执行完毕时会被调用。

示例

下面是两个简单的示例，演示了如何使用 fadeTo() 方法：

示例1：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnFadeOut").click(function(){
                $("p").fadeTo("slow", 0.2);
            });
            $("#btnFadeIn").click(function(){
                $("p").fadeTo("slow", 1);
            });
        });
    </script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br>

<button id="btnFadeOut">Fade Out</button>
<button id="btnFadeIn">Fade In</button>

</body>
</html>

在这个示例中，我们首先通过 jQuery 获取了两个段落元素（p），然后给两个按钮分别绑定了 click 事件，当按钮被点击时，分别调用 fadeTo() 方法，使段落元素淡出/淡入。

示例2:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnAnimate").click(function(){
                $(".box").animate({opacity:0.2, height:"200px", width:"200px"}, "slow");
                $(".box").animate({opacity:1, height:"100px", width:"100px"}, "slow");
            });
        });
    </script>
    <style>
        .box {
            width:100px;
            height:100px;
            background-color:red;
            margin:50px;
            float:left;
        }
    </style>
</head>
<body>

<div class="box"></div>
<div class="box"></div>
<br>

<button id="btnAnimate">Animate</button>

</body>
</html>

这个示例演示了一个更加复杂的动画过程，其中涉及到元素不仅淡入淡出，还会改变大小。为了实现这个动画，我们通过 animate() 方法，指定元素先淡出、改变大小，然后在此之后再淡入、还原大小。

需要注意的是，animate() 方法中传递的参数是一个 JavaScript 对象，包含需要动画的属性和值，其具体语法为：{属性1:值1, 属性2:值2, …}。这里我们使用了 opacity、height、width 三个属性分别指定元素不透明度、高度、宽度的变化，并使用字符串 slow 表示默认的动画时长。

希望这个攻略对你有所帮助！

Tags: