jQuery实现淡入淡出效果（附带实例）

如果在显示或隐藏元素时不需要改变元素的高度和宽度，只单独改变元素的透明度，就需要使用淡入淡出的动画效果。

jQuery 中提供了下表所示的实现淡入淡出的动画效果的方法。

表：实现淡入淡出的动画效果的方法
方法	说明	示例
fadeIn(speed,[callback])	通过提高不透明度实现匹配元素淡入的动画效果	$("img").fadeIn(300); // 淡入的动画效果
fadeOut(speed,[callback])	通过降低不透明度实现匹配元素淡出的动画效果	$("img").fadeOut(300); // 淡出的动画效果
fadeTo(speed,opacity,[callback])	将匹配元素的不透明度以渐进的方式调整到指定的参数	$("img").fadeTo(300,0.15); // 在 0.3s 内将图片不透明度逐渐降低至 15%
fadeToggle([speed,[easing],[fn]])	通过不透明度的变化来开关所有匹配元素的淡入淡出的动画效果	$("p").fadeToggle(300,"linear"); // 缓慢地将段落淡入

这 4 种方法都可以为其指定 speed 参数，speed 参数规则与 hide() 方法和 show() 方法的 speed 参数规则一致。在使用 fadeTo() 方法指定不透明度时，opacity 参数只能是 0~1 的数值（0 表示完全透明，1 表示完全不透明），数值越小，则图片的可见性就越差。

【实例】实现带淡入淡出的动画效果的自动隐藏式菜单。
1) 创建 index.html，引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，首先添加一张图片，id 属性值为 flag，用于控制菜单显示；然后添加一个 id 属性值为 menu 的 <div> 标记，用于显示菜单；最后在 <div> 标记中添加用于显示菜单项的 <ul> 和 <li> 标记。关键代码如下：

<div id="menu">
  <ul>
    <li><a href="c.biancheng.net">编程教材</a></li>
    <li><a href="c.biancheng.net">最近更新</a></li>
    <!-- 省略其他菜单项 -->
    <li><a href="c.biancheng.net">联系我们</a></li>
  </ul>
</div>
<img src="images/title.gif" width="30" height="80" id="flag" />

3) 编写 CSS 样式，用于控制菜单的显示样式。

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现菜单淡入淡出的动画效果。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("#flag").on("mouseover", function() {
        $("#menu").fadeIn(700);
        // 淡入的动画效果
    });
    $("#menu").hover(null, function() {
        $("#menu").fadeOut(700);
        // 淡出的动画效果
    });
});
</script>

运行效果如下图所示：

图 1 带淡入淡出动画效果的自动隐藏式菜单

jQuery实现淡入淡出效果（附带实例）

相关文章