jQuery中的动画
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的动画,以上。