JQuery之动画效果

Posted 2020-07-23 赤恩吉烨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery之动画效果相关的知识，希望对你有一定的参考价值。

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