JQuery动画效果总结

									JQuery动画效果总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：卢晓峰
撰写时间：2020年8月16日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jQuery动画特效说明
jQuery框架中为我们封装了众多的动画和特效方法，只需要调用对应的动画方法传递合适的参数，就能够方便的实现一些炫酷的效果，而且jQuery框架还支持自定义各种动画效果。
jQuery中的动画效果主要有以下方法
1.显示和隐藏动画
2. 展开和收起动画
3. 淡入和淡出动画
4. 自定义动画
显示和隐藏动画
jQuery框架中为我们提供了专门的方法来控制让标签显示或者是隐藏。标签的显示和隐藏在开发中相对来说是比较常见的操作，如果使用原生的JavaScript代码来控制标签的显示或者是隐藏，那么我们主要通过控制该标签的display属性值来实现。
jQuery中控制标签显示和隐藏的动画方法
控制让标签显示的动画方法:1. show()
控制让标签隐藏的动画方法:② hide()
控制让标签显示|隐藏效果切换的动画方法:③ toggle()
显示和隐藏动画方法语法
$("selector").show(speed,callBack)
$("selector").hide(speed,callBack)
参数说明：
第一个参数：可选的参数。speed表示执行动画的速度，该速度可以使用系统默认提供的值，也可以自己以数字的形式传入。
系统默认提供的值有：“slow”、“normal”、“fast”，对应的速度分别为0.6秒、0.4秒和0.2秒。
自己以数字的形式传递则：传递如1000|3000类似的值，单位为毫秒，如果传递1000表示动画的执行速度为1秒。
第二个参数：可选的参数。callBack为动画完成时执行的回调函数，该函数每个元素执行一次。
切换动画方法语法
调用方式[1] => $("selector").toggle()
调用方式[2] => $("selector").toggle(speed,callBack)
方法参数说明：
（1）调用方式[1]，不传递参数。切换当前元素（标签）的可见状态，如果当前元素的状态为不可见，则切换为可见，如果当前元素的状态为可见，则切换为不可见。
（2）调用方式[2]，第一个可选的参数为动画执行的速度，第二个可选的参数为动画执行完后执行的回调函数。

淡入和淡出动画
jQuery框架中还提供了淡入和淡出的动画方法，这两个方法分别是fadeIn和fadeOut。
淡入和淡出动画方法语法
fadeIn(speed，callBack);
fadeOut(speed，callBack)
fadeToggle(speed,callBack)
fadeTo(speed,opactity，callBack)
方法说明：
淡入淡出方法的内部实现原理是控制标签的透明度，通过改变选中标签的透明度来实现淡入和淡出的动画效果，并不修改其他的属性。
fadeIn()方法的作用是淡入动画，即改变标签的透明度让标签慢慢的显示出来。
fadeOut()方法的作用是淡出动画，即改变标签的透明度让标签慢慢的消失（透明度为0）。
fadeToggle()方法的作用是切换动画，如果当前标签的透明度不为0，那么就执行淡出动画，否则就执行淡入动画。
fadeTo()方法的作用是淡入到，即使用动画效果实现将标签的透明度设置为指定的值。
备注：标签透明度的取值范围为0.0~1.0。
参数说明：
speed参数：动画执行的速度，单位为毫秒。
callBack参数：动画执行完毕的回调函数，可选。
opacity参数：指定的标签透明度（0.0~1.0）。

展开和收起动画
jQuery框架中，为我们提供实现滑动效果的方法，slideDown和slideUp方法分别可以用来控制标签展开和收起。
展开和收起动画方法语法
slideDown(speed，callBack);
slideUp(speed，callBack)
slideToggle(speed,callBack)
方法解释
slideDown方法的功能是设置让指定标签的高度从顶部向底部增加，以呈现出一种展开的动画效果，元素的其他属性不会发生任何变化。
sldeUp方法的功能是设置让指定标签的高度从底部向顶部减小，仅仅改变标签的高度，其他的属性并不会改变。
slideToggle方法用来切换所选择元素的高度，如果当前标签的高度不为0，那么调用该方法后就会把标签的高度过渡为0，实现收起的效果，否则就实现展开的效果。
注意：无论是展开还是收起的动画方法，他们的动画效果都仅仅只会改变（增加或减小）标签的高度。
参数说明
第一个参数：动画执行的时间，同show方法。
第二个参数：动画执行完毕的回调函数，可以省略，同show方法。