jQuery动画效果——淡入淡出

桃扇骨 2022-04-05 13:20 347阅读 0赞

--------------------

任务描述

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

![206413][]

相关知识

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

fadeIn()，fadeOut() 和 fadeToggle()

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

*  `fadeIn()`相当于`show()`，它的实现原理是：**透明度从`0`变为`1`**；
 *  `fadeOut()`相当于`hide()`，它的实现原理是：**透明度从`1`变为`0`**；
 *  `fadeToggle()`相当于`toggle()`，它的实现原理是：**透明度的切换，透明的变为不透明，不透明的变为透明**；

下面是它们的显示效果：

![206341][]

fadeTo()

上面的方法都是控制透明度在`0`和`1`之间变换，有没有可能让透明度变为一个确定的值呢？ 比如`0.6`， 当然是可以的，  
这里需要实现的效果如下：  
![206347][]

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

1.  `<div class="item"></div>`
2.   
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()`的前两个参数是必需的；
 *  第一个参数表示执行的速度；
 *  第二个参数表示最终达到的透明度；
 *  第三个参数（完成后的函数`callback`）是可选的。

实现的效果如下：

![206349][]

可以看出，这个效果是很快的，一个动画接着一个动画。需要实现的效果是一个动画完成后，等了`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"`，表示快速度；
 *  毫秒，可自定义延迟时间；

编程要求

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

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

格式注意：

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

效果图如下：

![206413][]

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/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="https://www.educoder.net/attachments/download/206411"/>
             <img class="second" src="https://www.educoder.net/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>

[206413]: https://educoder.trustie.net/attachments/download/206413
[206341]: https://educoder.trustie.net/attachments/download/206341
[206347]: https://educoder.trustie.net/attachments/download/206347
[206349]: https://educoder.trustie.net/attachments/download/206349