Educoder jQuery动画 第2关：jQuery动画效果——淡入淡出

任务描述

本关任务：掌握jQuery常见的动画效果——淡入淡出，效果图如下。

相关知识

为了完成本关任务，你需要掌握：1.fadeIn()，2.fadeOut(), 3.fadeToggle()， 4.fadeTo() 5.delay()。

fadeIn()，fadeOut() 和 fadeToggle()

前面已经总结过：jQuery的动画语法都是一样的，只是动画名称不一样。

• fadeIn()相当于show()，它的实现原理是：**透明度从0变为1**；

• fadeOut()相当于hide()，它的实现原理是：**透明度从1变为0**；

• fadeToggle()相当于toggle()，它的实现原理是：透明度的切换，透明的变为不透明，不透明的变为透明。

下面是它们的显示效果：

fadeTo()

上面的方法都是控制透明度在0和1之间变换，有没有可能让透明度变为一个确定的值呢？ 比如0.6， 当然是可以的。

这里需要实现的效果如下：

怎么实现呢？这里介绍fadeTo()，代码如下:

1. <div class="item"></div>
3. <script>
4. $(function(){
5. $(".item").fadeTo("slow",0.8);
6. $(".item").fadeTo("slow",0.6);
7. $(".item").fadeTo("slow",0.4);
8. $(".item").fadeTo("slow",0.2);
9. $(".item").fadeTo("slow",0,function(){
10. alert("我消失了");
11. })
12. })
13. </script>

注意：

• fadeTo()的前两个参数是必需的；

• 第一个参数表示执行的速度，可以使用"slow"、"fast"或者毫秒；

• 第二个参数表示最终达到的透明度；

• 第三个参数（完成后的函数callback）是可选的。

实现的效果如下：

可以看出，这个效果是很快的，一个动画接着一个动画。现在需要实现的效果是一个动画完成后，等2s，然后开始下一个动画。这里介绍另一个方法 delay()，它可以延迟动画的执行时间，代码如下：

1. <script>
2. $(function(){
3. $(".item").delay(2000).fadeTo("slow",0.6);
4. $(".item").delay(2000).fadeTo("slow",0.4);
5. $(".item").delay(2000).fadeTo("slow",0.2);
6. $(".item").delay(2000).fadeTo("slow",0,function(){
7. alert("我消失了");
8. });
9. })
10. </script>

delay()的参数是可选的，不填表示没有延迟，参数的取值如下：

• "slow"，表示慢速度；

• "fast"，表示快速度；

• 毫秒，可自定义延迟时间。