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

1、jquery动画效果相关方法实例分析木文实例讲述了 jquery动画效果和关方法。分享给大家供大家参考，具体如下:1、show ()显示效果语法：show (speed, cal 1 back) number/string, function speend 为动画执彳亍时 间，单位为毫秒。也可以为slow", "normal",，zfast，z callback可选,为当动画完 成时执行的函数。show (speed, easing, callback) number/string easing 默认是 swing,可选 1 inear;复制代码代码如下：$(n#

2、div 1 u).show(3000,function() alert(“动画显示完成!“); );2、hide ()隐藏效果hide (speed,callback) number/string, functionhide(speed, easing, callback) number/string复制代码代码如下：$(n#div 1 u).hide(3000,function() alert(”动画隐藏完成”);3、toggleo隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示语法：toggle (speed, cal lback) number/str ing, fun cl i

3、 ontoggle(speed, callback) number/string, string,function复制代码代码如下：$(h#div 1 u).toggle(3000,function() alert(“动画效果切换完成”)；4、slidedown()向下显示，slow。是水平与垂直方向同时展开，而slidedown 是仅仅在垂直方向向下展开语法：si idedown (speed, cal lback) number/string, functionslidcdown(speed, casing,callback) number/string, function复制代码代码如下

4、：$(n#div 1 u).slidedown(3000,function() alert(”向卜展开显示成功!”)；);5、slideupo向上隐藏，hide()是水平与垂直两个方向的，而slideupo仅仅是垂直方向向上收起隐藏语法：slideup(speed, callback) number/string, functionslideup(speed, easing, callback) number/string, string,function复制代码代码如下：$c'#div 1 u).slideup(3000,function() alert(h 向上收起隐藏成功!“)；

5、)6、slidetoggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slidetoggle是仅仅垂 直方向的。语法：si idetoggle (speed, cal lback) number/string, fundionsiidetoggle(speed, easing,callback) number/string, string,function复制代码代码如下：$(n#div 1 u).slidetoggle(3000,function() alert(m水平方向上切换成功”););7、fadelno以改变透明度来显示语法：fadeln(speed, callback

6、)number/string, functionfadetn(speed, easing, callback) number/string, function复制代码代码如下：$(m#div 1 n).fadein(3000,function() alert(“淡入显示成功!”)； );fadeouto以改变透明度来隐藏语法：fadeout (speed, callback)number/string, functionfadeout(speed, casing, callcack) number/string, string,function复制代码代码如下：$(h#div 1 u).fad

7、e0ut(3000,function() alert(”淡出隐藏成功!“););9. fadetoggleo以改变透明度来切换显示隐藏状态语法：fadetoggle(speed, callback) number/string, functionfadetoggle(speed, easing, callback) number/string,function复制代码代码如下：$(n#div 1 n).fadetoggle(3000,function() alert(n淡入淡岀切换成功!”)； );10. fadeto()由指定的时间将透明度改变到指定的透明度语法：fadeto(speed,

8、callback)number/string, functionfadeto(speed,opacity, easing, fn) number/string, float,string,fun ction复制代码代码如下：$(”#divl“).fadeto(3000,0.22,function。 alert(”透明度改变成功!”); );11、animateo自定义动画，一般来说数字变动都可以用于动画。语法：an i mate (params, speed, eas i ng, cal 1 back);样式参数，时间，可选择， 函数复制代码代码如下：$("#divl ")

9、.animate( width:300px,height,300px ),3000);其中params要用中描号描起来，可以使用的css样式参数。注意要采用骆驼法 则，如font-size要写成fontsize。颜色渐变不支持。backgroundpositionbordcrwidthborderbottomwidthborderleftwidthborderrightwidthbordertopwidthbordcrspacingmarginmarginbottommarg inleftmarginrightmargintopoutlinewidthpaddingpaddingbottomp

10、addingleftpaddingrightpaddingtopheightwidthmaxlleightmaxwidthminheightmaxwidthfontfontsizebottomleftrighttopletterspacingwordspacing1ineheighttcxtlndcnt12、stop()停止正在执行动画stop(clearqueue, gotoend);两个参数均为布尔值，笫一个表示，是否停 止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置 为否，则停留在执行一半的状态。$(#divl) hide (5000) /此动画正在执行$(#di

11、vl) stop()； 上一行代码指定的动画停止在一半状态$(#divl") stop (true, true) ; /停止当前动画，同时动画切换到完成执行状 态。13、delay ()延迟执行动画 当一个动画stop () 了之后还能够用delay ()来延 迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有 延时效果。delay (duration, queuename) 设置一个延迟值来执行动画 integer, string复制代码代码如下：$(”#divl h).delay(3000).hide(3000); /表示在 3000 毫秒后执行 hide(30

12、00);14、jquery.fx.off 该属性只是是否关闭当前页面上的动画，关闭动画之后，没有动画效果, 所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的 范围也不同。$ (function () jquery. fx. off = true; /属性在事件外面，对贝面加载后执行的所有动画有 效$ c'ttdi vt7) .click (function () /属性如果写在这里,仅仅对当前点击事件 无效，不影响其他事件的动画$ (#divl") hide (3000) ; /注意由于 jquery. fx. off 设置为了 true,因此 3000毫秒失效,相当于hideo;)；)15、jquery. fx. interval 该属性设置动画的帧速，单位是毫秒，如果设置 的