学习笔记（四）：jQuery之动画效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、show()显示效果

语法：show(speed,callback)Number/String,Functionspeend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"callback可选,为当动画完成时执行的函数。

show(speed,[easing],callback)Number/Stringeasing默认是swing,可选linear;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });

2、hide()隐藏效果

语法:hide(speed,callback)Number/String,Function

hide(speed,easing,callback)Number/String

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

3、toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示

语法：toggle(speed,callback)Number/String,Function

toggle(speed,callback)Number/String,String,Function

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

4、slideDown()向下显示，slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开

语法:slideDown(speed,callback)Number/String,Function

slideDown(speed,[easing],callback)Number/String,Function

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

5、slideUp()向上隐藏,hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏

语法:slideUp(speed,callback)Number/String,Function

slideUp(speed,[easing],callback)Number/String,String,Function

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。

语法:slideToggle(speed,callback)Number/String,Function

slideToggle(speed,[easing],callback)Number/String,String,Function

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

7、fadeIn() 以改变透明度来显示

语法：fadeIn(speed,callback)Number/String,Function

fadeIn(speed,[easing],callback)Number/String,Function

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

8、fadeOut() 以改变透明度来隐藏

语法：fadeOut(speed,callback) Number/String,Function

fadeOut(speed,[easing],callcack) Number/String,String,Function

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

9、fadeToggle() 以改变透明度来切换显示隐藏状态

语法: fadeToggle(speed,callback)Number/String,Function

fadeToggle(speed,[easing],callback)Number/String,Function

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

10、fadeTo() 由指定的时间将透明度改变到指定的透明度

语法：fadeTo(speed,callback)Number/String,Function

fadeTo([speed],opacity,[easing],[fn])Number/String,Float,String,Function

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

11、animate() 自定义动画，一般来说数字变动都可以用于动画。

语法：animate(params,speed,easing,callback);样式参数，时间，可选择，函数

$("#div1").animate({ width:300px,height,300px },3000);

其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent