Educoder/头歌JAVA——jQuery动画
目录
第一关：jQuery动画效果——隐藏/显示
相关知识
show()和hide()
toggle()
编程要求
第2关：jQuery动画效果——淡入淡出
相关知识
fadeIn()，fadeOut() 和 fadeToggle()
fadeTo()
编程要求
第3关：jQuery动画效果——滑动
相关知识
slideDown()，slideUp() 和 slideToggle()
第4关：jQuery动画效果——自定义动画
相关知识
平移动画
相对值
stop()参数
编程要求
第一关：jQuery动画效果——隐藏/显示
相关知识
为了完成本关任务，你需要掌握：1.show()和hide()，2.toggle()。
show()和hide()
前面简单地了解过show()和hide()，这里对它们进行一个深入的了解。
基本的html结构如下(省略了css样式)：
这里先说隐藏的过程，它是慢慢隐藏的，是有时间的，这里用 hide()就可以实现，代码如下：
$(".box").hide(2000);
这里hide()方法的参数表示这个动画执行的速度，参数的取值如下：
-
"slow"，表示慢速度； -
"fast"，表示快速度； -
毫秒，可自定义，上面的是
2s。
然后，在隐藏完之后，弹出我消失了。 hide()还可以接受一个参数callback，是一个函数，在隐藏这个动作完成之后执行的动作。代码如下：
$(".box").hide(2000,function(){alert("我消失了");})
同理，show()也可以这样操作。
toggle()
toggle()可以切换hide()和show()，把隐藏的元素显示，显示的元素隐藏。
基本的html结构如下：
代码如下：
$(".toggle").click(function(){$(".item").toggle();})
同理，toggle()也可以设置动画执行的速度和完成后执行的动作。代码如下：
$(".item").toggle("slow",function(){alert("隐藏显示的切换");})
这里总结一下：jQuery自带的动画效果基本都是这样的语法（包括后面介绍到的淡入淡出和滑动）：
$(selector).method(speed, callback);
解释一下：
-
selector是要操作的元素； -
method是jQuery自带的动画名，比如show,hide,toggle； -
speed是动画运动的速度，参数可选，可有可无； -
callback是这个动画完成后需要执行的动作，参数可选，可有可无。
编程要求
根据提示，在右侧编辑器Begin至End之间填充代码，要求如下：
-
点击隐藏按钮，橙色小框消失，速度为
slow，完成后弹出我隐藏了； -
点击显示按钮，橙色小框显示，速度为
"1s，完成后弹出我显示了； -
点击
toggle按钮，第一次点击，橙色小框隐藏显示；第二次点击，橙色小框显示隐藏。效果来回切换，速度为"fast，完成后弹出隐藏显示的切换。
格式注意：
-
字符串统一用双引号
""表示； -
点击事件直接写功能即可，即
$(selector).click(function(){})； -
获取元素统一用类名获取。
Document
第2关：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()，代码如下:
注意：
-
fadeTo()的前两个参数是必需的； -
第一个参数表示执行的速度，可以使用
"slow"、"fast"或者毫秒； -
第二个参数表示最终达到的透明度；
-
第三个参数（完成后的函数
callback）是可选的。
这个效果是很快的，一个动画接着一个动画。现在需要实现的效果是一个动画完成后，等2s，然后开始下一个动画。这里介绍另一个方法 delay()，它可以延迟动画的执行时间，代码如下：
delay()的参数是可选的，不填表示没有延迟，参数的取值如下：
-
"slow"，表示慢速度； -
"fast"，表示快速度； -
毫秒，可自定义延迟时间。
编程要求
根据提示，在右侧编辑器Begin至End之间填充代码，实现下面效果，要求如下：
-
点击【动画开始】按钮，第一张图片透明度从
1变为0.5，速度为2s； -
第二张图片在延迟
2s后，透明度也从1变为0.5，速度为2s； -
两张图片一起淡出，速度为
"slow"。 -
Document
第3关：jQuery动画效果——滑动
相关知识
为了完成本关任务，你需要掌握：1.slideDown()，2.slideUp()，3.slideToggle()， 4.stop()。
slideDown()，slideUp() 和 slideToggle()
前面已经总结过：jQuery的动画语法都是一样的，只是动画名称不一样。
slideDown()是向下滑动元素，它的实现原理是：元素的高度从0变为已有的高度；
slideUp()是向上滑动元素，它的实现原理是：**元素的高度从现在的高度变为0**；
slideToggle()是切换滑动效果，它的实现原理是：向上滑动的变为向下滑动，向下滑动的变为向上滑动。
Hello jQuery!!!$(".stop").click(function(){$(".item").stop();})当鼠标浮动到菜单时， 菜单内容向下滑动，速度为1s；
当鼠标离开菜单时， 菜单内容向上滑动，速度为1s。
格式注意: 获取元素用类名来获取。
Document
第4关：jQuery动画效果——自定义动画
相关知识
为了完成本关任务，你需要掌握：1.平移动画，2.相对值，3.stop()函数 。
基本的结构如下：
平移动画
这个可以分解为两个动作：右移和左移。先说右移的情况，在右移过程中，宽度变宽了，字体变大了。
先实现往右移动，代码如下：
$(".item").animate({left: '500px'}, 2000);
说明如下：
-
移动改变的是
left值和top值 ，所以在样式中一定要有**定位position**。否则，没有定位，也就没有了left属性和top属性，也就不能移动了； -
基本结构中的样式
left:100px作为初始状态，往右移动的实现代码中，left:'500px'作为这个动画的最终状态，实际上移动了400px； -
2000表示这个动画完成的时间，是2000毫秒，可选的值是slow，fast，毫秒。
现在实现整个右移过程，实现代码如下：
$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)
可以发现：就是在往右移动的代码中添加了宽度和字体，需要注意的是，这里字体font-size的写法变成了fontSize，是用驼峰命名法。规则如下：
-
第一个单词以小写字母开始；
-
从第二个单词开始以后的每个单词的首字母都大写。
其他属性中带有-的，在动画中也都用驼峰命名法，比如：padding-left 变为paddingLeft。
现在实现左移的过程就很容易了，代码如下：
$(".item").animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)
jQuery最大的特点就是可以链式调用，这里也不例外，右移左移的过程，简写如下：
$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000).animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)
举一反三：前面实现的动画效果和自定义动画，都是可以链式调用的，比如： $(".box").show().fadeOut().slideUp().animate({width: '100px'});
相对值
这个动画每次移动相同的距离，当然可以在现有的left值的基础上，加上移动的距离作为一段动画的最终状态，但是这样太麻烦了，每次都得算距离，可不可以只用相对移动的距离呢？当然可以，实现代码如下：
$(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)
这行代码表示向右移动的距离为200px，在移动的过程中，从正方形变为圆 , 左移用-=。
stop()参数
现在有一个问题：当连续点击按钮【动画开始】，在点击完后，动画还在执行（点击多少次，执行多少次），需求是把一个时间段的连续点击作为一次点击。
解决办法就是，在第一个动画执行完后，把后面等待的动画都清除掉。后面等待的动画可以看作一个队列，只要把这个队列清除就可以了。
这里用停止动画的方法stop()，它是有两个参数的，都是可选的，参数详情如下：
-
第一个参数：是否清除动画队列，
true表示是，false表示否，默认是false； -
第二个参数：是否立即完成当前动画，
true表示是，false表示否，默认是false。
实现代码如下：
$(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)
这里如果把stop()的第二个参数设为true，会发生什么情况呢？
当连续点击第二次的时候，第一次的动画会立即执行，就会出现“闪现”的情况。
总结：不知道你注意到了没有，jQuery动画能操作的属性都是有数值的，比如：width,height,opacity,font-size,left等。颜色、背景色是不能操作的，想用的话，有颜色动画插件，可以自己试一下。
编程要求
根据提示，在右侧编辑器Begin至End之间补充代码，实现点赞效果。要求如下：
-
当点击【点赞】按钮时，爱心立即显示；
-
然后爱心向上移动
120px（用相对值），同时透明度变为0，速度为1.5s。
注意：
-
获取元素统一用类名获取元素；
-
字符串统一用双引号
""表示，这里透明度0也是要加双引号的； -
尽量用前面学到的方法；
-
用链式调用，减少DOM元素的获取。
效果如下：
Document