jQuery动画操作
一、元素的显示与隐藏
1、hide(元素隐藏)方法
$ele.hide()或.hide("fast / slow") (fast:200毫秒。slow:600毫秒。)
2、show(元素显示)方法
用法同hide相同
可设置参数,单位为毫秒。
3、toggle(元素隐藏与显示切换)方法
如果元素是最初显示,它会被隐藏
如果隐藏的,它会显示出来
二、元素的上卷下拉效果
1、slideDown()(元素的下拉动画)
$ele.slideDown( [duration ] [, callback ] )
duration设置动作需要的时间单位是毫秒。
slidetoggle 函数执行完之后,要执行的函数。
2、slideUp()(元素的上卷动画)
用法同slideDown
3、$ele.slideToggle( [duration ] ,[ callback ] )(元素的下拉与上卷动画)
如果元素是最初显示,它会被上卷
如果隐藏的,它会下拉
三、元素的淡入淡出效果
1、$ele.fadeIn( [duration ] ,[ callback ] )(淡入效果)
使元素opacity(透明度)从0到1变
2、$ele.fadeOut( [duration ] ,[ callback ] )(淡出效果)
使元素opacity(透明度)从1到0变
3、$ele.fadeToggle( [duration ] ,[ callback ] )(淡入淡出效果)
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
4、$ele.fadeTo( duration, opacity ,callback)方法
使元素动画固定到某个状态。
duration时间参数。动画需要的时间单位是毫秒。
opacity透明度。固定到那个透明度的位置。
callback回调函数。执行完fadeTo后执行的函数。
四、自定义动画
1、$ele.animate(styles,speed,easing,callback)方法
参数: styles:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的。
speed:动作出现的时间,单位是毫秒。
animate 函数执行完之后,要执行的函数。
$ele .animate( properties, options )
properties;参数同上面style
options可选。规定动画的额外选项。
2、stop()(停止动作)方法
stop():只会停止第一个动画,第二个第三个继续
stop(true):停止第一个、第二个和第三个动画
stop(true ture):停止动画,直接跳到第一个动画的最终状态