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()，代码如下:

2.  

注意：

• fadeTo()的前两个参数是必需的；
• 第一个参数表示执行的速度；
• 第二个参数表示最终达到的透明度；
• 第三个参数（完成后的函数callback）是可选的。

实现的效果如下：

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

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

• "slow"，表示慢速度；
• "fast"，表示快速度；
• 毫秒，可自定义延迟时间；

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，实现下面效果，要求如下：

• 点击【动画开始】按钮，第一张图片透明度从1变为0.5，速度为2s；
• 第二张图片在延迟2s后，透明度也从1变为0.5，速度为2s；
• 两张图片一起淡出，速度为"slow"；

格式注意：

• 字符串统一用双引号""表示；
• 获取元素统一用类名获取；

效果图如下：

 

 

    
    
    

    


    

         动画开始