jQuery动画效果相关方法实例分析

1、show()显示效果

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

show(speed,[easing],callback)  Number/String  easing默认是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

12、stop() 停止正在执行动画

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwxdz.html