前言:第八章：jQuery特效 一、基礎(chǔ)特效 1、hide方法 隱藏匹配的元素 hide( [duration ] [, easing ] [, complete ] ) 不傳參數(shù)表示立刻隱藏 可傳參數(shù)說(shuō)明： duration：一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久(如果不傳第一個(gè)參數(shù)，但是傳了后面的參數(shù)那么該參數(shù)默認(rèn)值為400) 字符串 fast 和 slow 分別代表200和600毫秒 easing： 一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)(默認(rèn): swing) jQuery自身提供linear 和 swin
第八章：jQuery特效
一、基礎(chǔ)特效
1、hide方法
隱藏匹配的元素
hide( [duration ] [, easing ] [, complete ] )
不傳參數(shù)表示立刻隱藏
可傳參數(shù)說(shuō)明：
duration：一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久(如果不傳第一個(gè)參數(shù)，但是傳了后面的參數(shù)那么該參數(shù)默認(rèn)值為400)
字符串 'fast' 和 'slow' 分別代表200和600毫秒
easing： 一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)(默認(rèn): swing)
jQuery自身提供"linear" 和 "swing" 其他過(guò)渡效果可以使用相關(guān)的插件實(shí)現(xiàn)
complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
函數(shù)內(nèi)部的this指向執(zhí)行動(dòng)畫的DOM元素
2、show方法
顯示匹配的元素
show( [duration ] [, easing ] [, complete ] )
3、toggle方法
顯示或隱藏匹配元素
使用說(shuō)明：
1）toggle( [duration ] [, easing ] [, complete ] )
2）toggle(Boolean)
一個(gè)布爾值，使用 true 來(lái)顯示元素，或者 false 隱藏它
二、滑動(dòng)特效
1、slideDown方法
用滑動(dòng)動(dòng)畫顯示匹配元素
slideDown( [duration ] [, easing ] [, complete ] )
2、slideUp方法
用滑動(dòng)動(dòng)畫隱藏匹配元素
slideUp( [duration ] [, easing ] [, complete ] )
3、slideToggle方法
用滑動(dòng)動(dòng)畫顯示或隱藏匹配元素
slideToggle( [duration ] [, easing ] [, complete ] )
三、淡入淡出特效
1、fadeOut方法
通過(guò)淡出的方式隱藏匹配元素
fadeOut( [duration ] [, easing ] [, complete ] )
2、fadeIn方法
通過(guò)淡入的方式顯示匹配元素
fadeIn( [duration ] [, easing ] [, complete ] )
3、fadeTo方法
調(diào)整匹配元素的透明度
fadeTo( duration, opacity [, easing ] [, complete ] )
可傳參數(shù)說(shuō)明：
opacity
類型: Number
0和1之間的數(shù)字表示目標(biāo)元素的不透明度
4、fadeToggle方法
通過(guò)匹配的元素的不透明度動(dòng)畫，來(lái)顯示或隱藏它們
fadeToggle( [duration ] [, easing ] [, complete ] )
四、定制特效
1、animate方法
根據(jù)一組 CSS 屬性，執(zhí)行自定義動(dòng)畫
animate( properties [, duration ] [, easing ] [, complete ] )
可傳參數(shù)說(shuō)明：
properties：
一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)
值也可以是：+= 或 -=開(kāi)始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來(lái)計(jì)算的
比如：left: '+=50'
注意：
.所有用于動(dòng)畫的屬性必須是數(shù)字的（例如，width, height或者left可以執(zhí)行動(dòng)畫），除非另有說(shuō)明
.除了樣式屬性， 一些非樣式的屬性，如scrollTop 和 scrollLeft，以及自定義屬性，也可應(yīng)用于動(dòng)畫！
.要設(shè)置整個(gè)頁(yè)面的滾動(dòng)條不可以將document或者window傳入$函數(shù)，必須將html,body一起傳入才可得到各個(gè)瀏覽器
的兼容即：$('html,body')，這就是規(guī)定，這么用就ok了！
.CSS簡(jiǎn)寫屬性（例如font, border等）沒(méi)有得到充分的支持，即設(shè)置時(shí)不要用簡(jiǎn)寫方式！
并且， 對(duì)于這些屬性預(yù)設(shè)值最好不要是"auto" 。
duration： 一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久(默認(rèn): 400)
默認(rèn)值: "normal"， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
easing： 一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)(默認(rèn): swing)
jQuery自身提供"linear" 和 "swing"
complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
函數(shù)內(nèi)部的this指向執(zhí)行動(dòng)畫的DOM元素
五、創(chuàng)建并管理隊(duì)列
隊(duì)列：函數(shù)隊(duì)列
函數(shù)在排隊(duì)，優(yōu)點(diǎn)，第一個(gè)全部執(zhí)行完成了，第二個(gè)才會(huì)開(kāi)始執(zhí)行，依次，后面都是一樣的，不會(huì)混亂！
1、queue方法
在匹配的元素上創(chuàng)建函數(shù)隊(duì)列（替換已有隊(duì)列），或向函數(shù)隊(duì)列中添加函數(shù)
queue方法用于，在匹配的元素上，創(chuàng)建隊(duì)列、替換已有隊(duì)列、向已有隊(duì)列中繼續(xù)添加函數(shù)！
1）怎么在匹配的元素上創(chuàng)建函數(shù)隊(duì)列
jQuery對(duì)象.queue('sunshengli',函數(shù)數(shù)組);
2）替換已有隊(duì)列
jQuery對(duì)象.queue('已有隊(duì)列名稱',函數(shù)數(shù)組);
3）向已有隊(duì)列中繼續(xù)添加函數(shù)
jQuery對(duì)象.queue('已有隊(duì)列名稱',function(next){});
4）獲取，指定元素上指定隊(duì)列中函數(shù)的個(gè)數(shù)（包括正在執(zhí)行的方法）
jQuery對(duì)象.queue('已有的隊(duì)列名稱').length;
正在執(zhí)行的動(dòng)畫方法顯示形式為："inprogress"
2、dequeue方法
執(zhí)行匹配元素隊(duì)列的下一個(gè)函數(shù)
當(dāng)dequeue()被調(diào)用的時(shí)候，列隊(duì)中的下一個(gè)函數(shù)將從這個(gè)列隊(duì)中被移除，然后再執(zhí)行。
dequeue( [queueName ] )
參數(shù)：
queueName：一個(gè)含有隊(duì)列名的字符串。（默認(rèn)是fx，標(biāo)準(zhǔn)的效果隊(duì)列）
3、clearQueue方法
從列隊(duì)中移除所有未執(zhí)行的項(xiàng)
clearQueue( [queueName ] )
queueName：一個(gè)含有隊(duì)列名的字符串。默認(rèn)是fx，標(biāo)準(zhǔn)的效果隊(duì)列
當(dāng)clearQueue()方法被訪問(wèn)的時(shí)候，所有在這個(gè)列隊(duì)中未執(zhí)行的函數(shù)將被移除 。
這個(gè)方法類似stop(true)然而stop()方法只適用在動(dòng)畫中,clearQueue()還可以用來(lái)移除用queue()方法添加到隊(duì)里中的任何函數(shù)
4、stop方法
停止匹配元素當(dāng)前 正在運(yùn)行 的 動(dòng)畫方法
stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
參數(shù)：
queue：停止動(dòng)畫隊(duì)列的名稱（默認(rèn)值為標(biāo)準(zhǔn)的該元素上面的fx這個(gè)動(dòng)畫隊(duì)列）
clearQueue： 一個(gè)布爾值，指示是否取消已列隊(duì)動(dòng)畫。默認(rèn) false
jumpToEnd： 一個(gè)布爾值指示是否當(dāng)前動(dòng)畫方法立即完成。默認(rèn)false
使用stop方法的傳參不同情況：
1）jQuery對(duì)象.stop(['fx',]false,false);
簡(jiǎn)寫方式：jQuery對(duì)象.stop();
作用：停止當(dāng)前正在運(yùn)行的動(dòng)畫方法，然后繼續(xù)執(zhí)行當(dāng)前動(dòng)畫隊(duì)列中的接下來(lái)的動(dòng)畫方法！
2）jQuery對(duì)象.stop(['fx',]false,true);
作用：立刻完成當(dāng)前正在執(zhí)行的動(dòng)畫方法，然后繼續(xù)執(zhí)行隊(duì)列中下面的動(dòng)畫方法！
3）jQuery對(duì)象.stop(['fx',]true,false);
簡(jiǎn)寫方法：jQuery對(duì)象.stop(['fx',],true);
作用：停止正在執(zhí)行的動(dòng)畫方法，清除隊(duì)列中其他的動(dòng)畫方法！
4）jQuery對(duì)象.stop(['fx',]true,true);
作用：立刻完成當(dāng)前正在執(zhí)行的動(dòng)畫方法，清除除列隊(duì)中其他的所有動(dòng)畫方法！
5、finish方法
停止當(dāng)前正在運(yùn)行的動(dòng)畫，刪除所有排隊(duì)的動(dòng)畫，并完成匹配元素所有的動(dòng)畫
finish( [queue ] )
參數(shù)：
queue：停止動(dòng)畫隊(duì)列中的名稱(默認(rèn): 'fx')
當(dāng)finish()在一個(gè)元素上被調(diào)用，立即停止當(dāng)前正在運(yùn)行的動(dòng)畫和所有排隊(duì)的動(dòng)畫（如果有的話），并且他們的CSS屬性設(shè)置為它們的
目標(biāo)值。所有排隊(duì)的動(dòng)畫將被刪除。
六、配置動(dòng)畫特效
1、$.fx.interval
這個(gè)屬性可以設(shè)置每隔多少毫秒繪制一幀圖像。默認(rèn)是13毫秒。
該屬性值越小，在速度較快的瀏覽器中（例如，Chrome），動(dòng)畫執(zhí)行的越流暢，但是會(huì)影響程序的性能并且占用更多的 CPU 資源
2、$.fx.off
全局的禁用所有動(dòng)畫
當(dāng)這個(gè)屬性設(shè)置為true的時(shí)候，調(diào)用時(shí)所有動(dòng)畫方法將立即設(shè)置元素為他們的最終狀態(tài)
補(bǔ)充：
默認(rèn)情況下，我們?cè)谕粋€(gè)元素上執(zhí)行的動(dòng)畫方法，會(huì)被自動(dòng)的放入該元素下的fx隊(duì)列中！
fx隊(duì)列會(huì)自動(dòng)執(zhí)行里面的第一個(gè)方法，當(dāng)前的動(dòng)畫方法執(zhí)行完之后還會(huì)自動(dòng)執(zhí)行fx隊(duì)列中的下一個(gè)方法。
非動(dòng)畫方法，并不會(huì)被放入fx隊(duì)列中！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
上一篇:<<jQuery事件處理筆記 下一篇:dede織夢(mèng)怎么調(diào)用全局相關(guān)文章>>
