任务描述
本关任务：掌握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()，代码如下:
<div class="item"></div><script>$(function(){$(".item").fadeTo("slow",0.8);$(".item").fadeTo("slow",0.6);$(".item").fadeTo("slow",0.4);$(".item").fadeTo("slow",0.2);$(".item").fadeTo("slow",0,function(){alert("我消失了");})})</script>
注意：
fadeTo()的前两个参数是必需的；第一个参数表示执行的速度；第二个参数表示最终达到的透明度；第三个参数（完成后的函数callback）是可选的。
实现的效果如下：
可以看出，这个效果是很快的，一个动画接着一个动画。需要实现的效果是一个动画完成后，等了2s，然后开始下一个动画。这里介绍另一个方法delay()，它可以延迟动画的执行时间，代码如下：
<script>$(function(){$(".item").delay(2000).fadeTo("slow",0.6);$(".item").delay(2000).fadeTo("slow",0.4);$(".item").delay(2000).fadeTo("slow",0.2);$(".item").delay(2000).fadeTo("slow",0,function(){alert("我消失了");});})</script>
delay()的参数是可选的，不填表示没有延迟，参数的取值如下：
"slow"，表示慢速度；"fast"，表示快速度；毫秒，可自定义延迟时间；
编程要求
根据提示，在右侧编辑器Begin至End之间填充代码，实现下面效果，要求如下：
点击【动画开始】按钮，第一张图片透明度从1变为0.5，速度为2s；第二张图片在延迟2s后，透明度也从1变为0.5，速度为2s；两张图片一起淡出，速度为"slow"；
格式注意：
字符串统一用双引号""表示；获取元素统一用类名获取；
效果图如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="/jquery-3.3.1.min.js"></script><style>.container {width: 60%;height: 260px;margin: 30px auto;} button{margin: 100px 20px 0 0 ;float: left;}img{width: 200px;height: 200px;float: left;margin-right: 30px;}</style></head><body><div class="container"><button class="btn">动画开始</button><img class="first" src="/attachments/download/206411"/><img class="second" src="/attachments/download/206410" /></div></div><script>$(function(){$(".btn").click(function(){ // ---------- Begin -----------$(".first").fadeTo(2000,0.5);$(".second").delay(2000).fadeTo(2000,0.5);$(".first").delay(2000).fadeOut("slow");$(".second").fadeOut("slow")// ---------- End -----------})})</script></body></html>
