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

 

任务描述

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

相关知识

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

基本的结构如下：

1. 动画开始
2. Hello
3.  

效果如下：

平移动画

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

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

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

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'});

相对值

需要实现的效果如下：

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

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

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

stop()参数

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

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

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

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

实现代码如下：

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

效果如下:

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

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

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

编程要求

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

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

注意：

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

效果如下：

 

	
	
	

	


    

    	点赞