jQuery动画效果实现
目录
jQuery动画效果说明
方法如下:
显示和隐藏动画
显示和隐藏动画方法
展开和收起动画
展开和收起动画方法
淡出和淡入动画
淡出和淡入动画方法
自定义动画
jQuery动画效果说明
在JS当中,为了实现动画效果我们往往需要各种的声明,调用,循环,遍历,无所不用其极.往往敲完一个简单的效果,时间已经过了几十分钟甚至几个小时.而当你使用了jQuery库之后,代码量可以大大缩减,减少Coder敲代码的时间,并且保证功能的完美实现.
今天我简单的介绍一下使用jQuery库实现JS动画效果
方法如下:
- 显示和隐藏
- 展开和收起
- 淡入和淡出
- 自定义动画
显示和隐藏动画
在原生代码中,我们常需要使用display来设置标签内容的显示与隐藏,而在jQuery中,我们可以直接使用专门的方法实现效果.
显示和隐藏动画方法
- show();控制让标签显示的动画方法
- hide();控制让标签隐藏的动画方法
- toggle();控制让标签显示|隐藏效果切换的动画方法
显示和隐藏动画语法
$(' div ').show(speed,callBack)
$(' div ').hide(speed,callBack)
其中speed为可选参数,代表着执行动画速度,单位为毫秒
可用系统默认值:“slow”、“normal”、“fast”,对应的速度分别为0.6秒、0.4秒和0.2秒。
callBack为可选参数,代表着动画执行完之后的回调函数.
$(' div ').toggle()
不传递参数,切换当前元素（标签）的可见状态，如果当前元素的状态为不可见，则切换为可见，如果当前元素的状态为可见，则切换为不可见。
$(' div ').toggle(speed,callBack)
第一个可选的参数为动画执行的速度，第二个可选的参数为动画执行完后执行的回调函数。
show和hide的实现逻辑为同时改变标签的width,height,以及opacity.
展开和收起动画
展开和收起动画,在显示和隐藏的基础上增加了动画的滑动效果,这显然看起来更coolllllll~
展开和收起动画方法
- slideDown
- slideUp
- slideToggle
2
展开和收起动画语法
slideDown(speed，callBack) slideUp(speed，callBack) slideToggle(speed,callBack)
无论是展开还是收起,它们改变的仅仅只是标签的高度
slideToggle 当当前标签高度不为0时,将高度改为0,实现收起效果,如果为0,则实现展开效果.
三种语法的参数,第一个参数：动画执行的时间，同show方法。
第二个参数：动画执行完毕的回调函数，可以省略，同show方法。
淡出和淡入动画
其实就是改变了标签的透明度,并不修改其他属性
淡出和淡入动画方法
- fadeIn
- fadeOut
- fadeToggle
- fadeTo
淡入和淡出动画语法
fadeIn(speed，callBack); fadeOut(speed，callBack) fadeToggle(speed,callBack) fadeTo(speed,opactity，callBack)
fadeIn()方法的作用是淡入动画，即改变标签的透明度让标签慢慢的显示出来。
fadeOut()方法的作用是淡出动画，即改变标签的透明度让标签慢慢的消失（透明度为0）。
fadeToggle()方法的作用是切换动画，如果当前标签的透明度不为0，那么就执行淡出动画，否则就执行淡入动画。
fadeTo()方法的作用是淡入到，即使用动画效果实现将标签的透明度设置为指定的值。
透明度(opacity)的取值为:0.0~1.0
自定义动画
自定义动画为jQuery库里已经封装好的控制宽高,透明度等相关功能的方法,jQuery为我们专门提供了一个animate()方法,以供我们自定义其动画效果.
自定义动画效果语法
animate(styles,speed,easing,callback)
其中
style为规定产生动画效果的 CSS 样式和值。
speed为速度,设定与show相同
easing为可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：
swing
linear
callBack为回调函数,这个你们都懂啦,就不再叙述了.
对了,最后,如果你们拿案例代码去实现发现无效的时候,可以去看下是不是自己的jQuery和我的版本不同,嘻嘻~,之前我吃过这个亏,所以提一下~