jQuery -动画
jQuery动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。
一、非自定义动画：
1.显示、隐藏：
show( ) 、hide( )、toggle()
两种用法：1）不传参数，代表直接显示隐藏。
2） 向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。
示例:show(100)、hide(100)、toggle(100)
除此之外，jQuery还为动画方法提供了三种字符串形式的参数：fast、slow、和空字符串''
示例:show('fast')、hide('slow')、toggle('')
三种参数的执行时间分别为 ：'fast' ：200毫秒 ''(默认值):400毫秒 'slow'：600毫秒
2.滑动：
slideUp()：向上滑动（隐藏）
slideDown():向下滑动（显示）
slideToggle()：滑动（自动）
3.淡入淡出：
fadeOut():淡出（隐藏）
fadeIn():淡入（显示）
fadeToggle():显示隐藏（）自动
fadeTo()，该方法接受两个参数。
参数1是动画执行的时间，参数2是期望达到的透明度。
二、自定义动画
animate()方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。
animate()方法的使用：
将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。
- animate({
- 'width':'200px'，
- 'height':'200px'
- })
设置的属性，支持运算。
- animate({
- 'width':'+=200px'
- })
如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：
1）借助动画的回调函数（操作不同元素的时候，推荐使用回调函数）
- $('input').click(function(){
- $('div').animate({
- 'width':'400px',
- 'height':'400px',
- },function(){
- $('div').animate({
- 'width':'200px',
- 'height':'200px'
- })
- })
- })
2）将动画效果分开写
- $('input').click(function(){
- $('div').animate({
- 'width':'400px',
- 'height':'400px',
- })
- $('div').animate({
- 'width':'200px',
- 'height':'200px'
- })
- })
3）连缀（操作同一元素的时候，推荐使用连缀）
- $('input').click(function(){
- $('div').animate({
- 'width':'400px',
- 'height':'400px',
- }).animate({
- 'width':'200px',
- 'height':'200px'
- })
- })
三、动画及相关方法
1.stop()方法
这个方法是停止动画的方法，他有两个参数，都是布尔值。
参数1：代表是否清除动画队列；参数2：代表是否直接运行到最后结果
2.delay()方法
延时执行，该方法有一个参数，是延时执行的毫秒数。
3.动画的递归
- $('div').slideToggle(2000,recursion)
- function recursion(){
- $(this).slideToggle(2000,recursion)
- }
附赠个高级写法：
- $('div').slideToggle(2000,function(){
- $(this).slideToggle(2000,arguments.callee)
- })
- //arguments.callee：常用在匿名函数中， 代表当前的函数。
jQuery的动画，以上。
经验首页