jQuery动画效果——点赞动画效果

清疚 2022-04-05 13:44 481阅读 0赞

任务描述

本关任务：掌握jQuery常见的动画效果——自定义动画。实现的效果如下：

![206510][]

相关知识

为了完成本关任务，你需要掌握：1.平移动画，2.相对值，3.`stop()`函数 。

基本的结构如下：

1.  `<button class="stop">动画开始</button>`
2.  `<div class="item">Hello</div>`
3.   
4.  `<style>`
5.  `.item{`
6.  `position: absolute;`
7.  `left: 100px;`
8.  `width: 100px;`
9.  `height: 100px;`
10. `font-size: 24px;`
11. `}`
12. `</style>`

效果如下：

![206389][]

平移动画

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

![206376][]

这个可以分解为两个动作：右移和左移。先说右移的情况，在右移过程中，宽度变宽了，字体变大了。

先实现往右移动，代码如下：

1.  `$(".item").animate({left: '500px'}, 2000);`

说明如下：

*  移动改变的是`left`值和`top`值 ，所以在样式中一定要有**定位`position`**，否则没有定位，也就没有了`left`属性和`top`属性，也就不能移动了；
 *  基本结构中的样式`left:100px`作为初始状态，往右移动的实现代码中，`left:'500px'`作为这个动画的最终状态，实际上移动了`400px`；
 *  `2000`表示这个动画完成的时间，是`2000`毫秒，可选的值是`slow，fast，毫秒`；

现在实现整个右移过程，实现代码如下：

1.  `$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)`

可以发现：就是在往右移动的代码中添加了宽度和字体，需要注意的是，这里字体`font-size`的写法变成了`fontSize`，是用**驼峰命名法**。规则如下：

*  第一个单词以小写字母开始；
 *  从第二个单词开始以后的每个单词的首字母都大写。

其他属性中带有`-`的，在动画中也都用**驼峰命名法**，比如：`padding-left` 变为`paddingLeft`。

现在实现左移的过程就很容易了，代码如下：

1.  `$(".item").animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)`

jQuery最大的特点就是可以链式调用，这里也不例外，右移左移的过程，简写如下：

1.  `$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)`
2.  `.animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)`

举一反三：前面实现的动画效果和自定义动画都是可以链式调用的，比如：  
`$(".box").show().fadeOut().slideUp().animate({width: '100px'});`

相对值

需要实现的效果如下：

![206390][]

这个动画每次移动相同的距离，当然可以在现有的`left`值的基础上加上移动的距离作为一段动画的最终状态，但是这样太麻烦了，每次都的算距离，可不可以只用相对移动的距离呢？当然可以，实现代码如下：

1.  `$(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)`

这行代码表示向右移动的距离为`200px`, 在移动的过程中 , 从正方形变为圆 , 左移用`-=`。

stop()参数

现在有一个问题：当连续点击按钮【动画开始】，在点击完后，动画还在执行（点击多少次，执行多少次），需求是把一个时间段的连续点击作为一次点击。连续点击的效果图如下：

![206391][]

解决办法就是在第一个动画执行完后，把后面等待的动画都清除掉。后面等待的动画可以看作一个队列，只要把这个队列清除就可以了。

这里用停止动画的方法`stop()`，它是有两个参数的，都是可选的，参数详情如下：

*  第一个参数：是否清除动画队列，`true`表示是，`false`表示否，默认是`false`；
 *  第二个参数：是否立即完成当前动画，`true`表示是，`false`表示否，默认是`false`；

实现代码如下：

1.  `$(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)`

效果如下:

![206392][]

这里如果把`stop()`的第二个参数设为`true`，会发生什么情况呢？效果图如下：

![206393][]

当连续点击第二次的时候，第一次的动画会立即执行，就会出现“闪现”的情况。

**总结**：不知道你注意到了没有，jQuery动画能操作的属性都是有**数值**的，比如：`width,height,opacity,font-size,left`等，  
颜色、背景色是不能操作的，想用的话，有[颜色动画][Link 1]插件，可以自己试一下。

编程要求

根据提示，在右侧编辑器补充代码，实现点赞效果。要求如下：

*  当点击【点赞】按钮时，爱心立即显示；
 *  然后爱心向上移动 `120px`（用相对值），同时透明度变为`0`，速度为`1.5s`；

注意：

*  获取元素统一用**类名**获取元素；
 *  字符串统一用双引号`""`表示，这里透明度`0`也是要加双引号的；
 *  尽量用前面学到的方法；
 *  用**链式调用**，减少DOM元素的获取；

效果如下：

![206510][]

<!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: 100px;
            height: 200px;
            margin: 20px auto;
            position:relative;
    	}
        button{
        	position: absolute;
            left: 30px;
            bottom: 10px;
        }
        img{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 36px;
            bottom: 36px;
            display: none;
        }
    
    	</style>
    </head>
    <body>
        <div class="container">
        	<button class="btn">点赞</button>
        </div>
    
       <script>
        $(function(){
             $(".btn").click(function(){
                //向contianer里插入DOM元素 img 标签，每点击一次，插入一张图片。
                var dom = '<img class="love" src="https://www.educoder.net/attachments/download/206509" alt="爱心">';
                $(".container").append(dom);
    
                //--------- Begin ----------
                $(".love").show().animate({bottom:"+=120px",opacity:"0"},1500);
                //--------- End ------------
             })
        })
    
       </script>
    </body>
    </html>

[206510]: https://educoder.trustie.net/attachments/download/206510
[206389]: https://educoder.trustie.net/attachments/download/206389
[206376]: https://educoder.trustie.net/attachments/download/206376
[206390]: https://educoder.trustie.net/attachments/download/206390
[206391]: /images/20220405/de3c7400746445d68dca0cbb52bbd4bd.png
[206392]: https://educoder.trustie.net/attachments/download/206392
[206393]: https://educoder.trustie.net/attachments/download/206393
[Link 1]: http://plugins.jquery.com/color/