jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn()方法
fadeIn() 实现淡入效果，其基本语法如下：
$(selector).fadeIn(speed,callback);
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在fadeIn()方法结束后调用。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()方法
fadeOut() 实现淡出效果，其基本语法如下：
$(selector).fadeOut(speed,callback);
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在fadeIn()方法结束后调用。
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeToggle()方法
fadeToggle() 交替进行fadeIn()和fadeOut()，如果元素是淡出的，那么fadeToggle()将淡入该元素，如果之前是淡入的，fadeToggle将淡出该元素。
其基本语法如下：
$(selector).fadeToggle(speed,callback);
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在fadeIn()方法结束后调用。
下面例子，点击按钮之后，可以交替淡出淡入三个矩形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br>
<br>
<div id="div1" style="width: 80px; height: 80px;
background-color: red;"></div>
<br>
<div id="div2" style="width: 80px; height: 80px;
background-color: green;"></div>
<br>
<div id="div3" style="width: 80px; height: 80px;
background-color: blue;"></div>
</body>
</html>
fadeTo()方法
fadeTo() 实现淡化到指定的透明度，其基本语法如下：
$(selector).fadeTo(speed,opacity,callback);
必需参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个必须参数为透明度，值域为0到1之间。
可选参数为回调函数，在fadeIn()方法结束后调用。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
分享到：
相关推荐
根据滚动位置对元素应用淡入淡出效果的 JQuery 插件。 入门 软件要求 这个项目需要： 咕噜声依赖 要安装 Node.js 依赖项，您必须从最喜爱的终端输入以下命令： npm install 此命令将安装具有依赖项的 。 Bower ...
第2节：动画第2节教您如何在jQuery中使用预定义和自定义动画，包括淡入淡出，滑动和移动元素。第3节：jQuery选择器第三部分是关于在页面上选择正确的元素。 这包括使用CSS选择器，用于遍历DOM的jQuery函数以及基于...
#ShowText 页面加载后很少有淡入淡出的文本动画（通过 CSS3 转换） 演示页面： ＃＃入门 1. 在您的网站上包含 js。 < script src =" lib/jquery.showtext.min.js " > </ script > 2.初始化 < ...
并具有动画和效果（如滑动和淡入淡出）创建与您的交互使用事件侦听器（例如鼠标事件和键盘事件）的页面使用AJAX连接到JSON数据以轻松地将内容填充到页面中jQuery仍然是最流行JavaScript库。 实际上，超过1900万个...
5.3 淡入淡出/135 5.3.1 fadeIn()与fadeOut()方法/135 5.3.2 fadeTo()方法/137 5.4 自定义动画/139 5.4.1 简单的动画/140 5.4.2 移动位置的动画/141 5.4.3 队列中的动画/144 5.4.4 动画停止和延时/146 5.5 ...
5.1.1 show（）与hide（）方法 5.1.2 动画效果的show（）与hide（）方法 5.1.3 toggle（）方法 5.2 滑动 5.2.1 slidedown（）与slideup方法 5.2.2 slidetoggle（）方法 5.3 淡入淡出 5.3.1 fadein...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 jQuery项目历史 1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第...
7.3.2 淡入淡出元素 194 7.3.3 滑动元素 195 7.3.4 动画 195 7.4 教程：带有效果的照片集 197 7.4.1 任务概览 197 7.4.2 编程 198 7.5 使用jQuery lightBox的高级照片集 201 7.5.1 基础 202 7.5.2 定制lightBox 204 ...
通过淡入淡出的简单过渡。 带有可选的预览项目（或仅一些项目符号）。 滑动 通过滑入即可轻松过渡。带有可选的预览项目（或仅一些项目符号）。 弹出式 支持对宽度可变的幻灯片的调整大小条作出响应。 用法 可与npm和...