網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)第5章-jQuery中的事件處理和動(dòng)畫(huà)效果

1、jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）劉剛 主編新一代信息技術(shù)“十三五”系列規(guī)劃教材 第5章 jQuery中的事件處理和動(dòng)畫(huà)效果 本章要點(diǎn)： jQuery的工廠函數(shù) 頁(yè)面加載響應(yīng)事件 事件綁定 模擬用戶(hù)操作 事件冒泡 事件捕獲 事件對(duì)象 隱藏和顯示匹配元素 切換元素的可見(jiàn)狀態(tài) 淡入淡出動(dòng)畫(huà)效果 滑動(dòng)動(dòng)畫(huà)效果 自定義動(dòng)畫(huà)效果 人們常說(shuō)“事件是腳本語(yǔ)言的靈魂”，事件使頁(yè)面具有了動(dòng)態(tài)性和響應(yīng)性，如果沒(méi)有事件將很難完成頁(yè)面與用戶(hù)之間的交互。在傳統(tǒng)的 JavaScript 中內(nèi)置了一些事件響應(yīng)的方式，但是 jQuery 增強(qiáng)、優(yōu)化并擴(kuò)展了基本的事件處理機(jī)制。5.1 jQuery 中的事件處理 5.1

2、.1 頁(yè)面加載響應(yīng)事件 $(document).ready()方法是事件模塊中最重要的一個(gè)函數(shù)，它極大地提高了 Web 響應(yīng)速度。$(document)是獲取整個(gè)文檔對(duì)象，從這個(gè)方法名稱(chēng)來(lái)理解，就是獲取就緒的文檔。 方法的書(shū)寫(xiě)格式為：$(document).ready(function() /在這里寫(xiě)代碼 ); 可以簡(jiǎn)寫(xiě)成：$().ready(function() /在這里寫(xiě)代碼 ); 當(dāng)$()不帶參數(shù)時(shí)，默認(rèn)的參數(shù)就是 document，所以$()是$(document)的簡(jiǎn)寫(xiě)形式。 還可以進(jìn)一步簡(jiǎn)寫(xiě)成：$(function() /在這里寫(xiě)代碼 ); 通過(guò)上面的介紹可以看出，在 jQuery

3、 中，可以使用$(document).ready()方法代替?zhèn)鹘y(tǒng)的 window.onload()方法，不過(guò)兩者之間還是有些細(xì)微的區(qū)別的，主要表示在以下兩方面。（1）在一個(gè)頁(yè)面上可以無(wú)限制地使用$(document).ready()方法，各個(gè)方法間并不沖突，會(huì)按照在代碼中的順序依次執(zhí)行。而 window.onload()方法在一個(gè)頁(yè)面中只能使用一次。（2）在一個(gè)文檔完全下載到瀏覽器時(shí)（包括所有關(guān)聯(lián)的文件，如圖片、橫幅等）就會(huì)響應(yīng) window.onload()方法。而$(document).ready()方法是在所有的 DOM 元素完全就緒以后就可以調(diào)用，不包括關(guān)聯(lián)的文件。5.1.2 jQue

4、ry 中的事件 只有頁(yè)面加載顯然是不夠的，程序在其他的時(shí)候也需要完成某個(gè)任務(wù)。比如鼠標(biāo)單擊（onclick）事件、敲擊鍵盤(pán)（onkeypress）事件以及失去焦點(diǎn)（onblur）事件等。 在不同的瀏覽器中事件名稱(chēng)是不同的，例如，在IE瀏覽器中的事件名稱(chēng)大部分都含有 on，例如 onkeypress()事件，但是在火狐瀏覽器卻沒(méi)有這個(gè)事件名稱(chēng)，jQuery統(tǒng)一了所有事件的名稱(chēng)。jQuery 中的事件如表 5-1 所示。表 5-1 jQuery 中的事件續(xù)表5.1.3 事件綁定 在頁(yè)面加載完畢時(shí)，程序可以通過(guò)為元素綁定事件完成相應(yīng)的操作。在 jQuery 中，事件綁定通常可以分為元素綁定事件、移除

5、綁定事件和綁定一次性事件處理 3 種情況。1bind 為元素綁定事件 在 jQuery 中，為元素綁定事件可以使用 bind()方法，該方法的語(yǔ)法結(jié)構(gòu)如下：bind(type,data,fn) type：事件類(lèi)型，表 5-1（jQuery 中的事件）中所列舉的事件。data：可選參數(shù)，作為 event.data 屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。大多數(shù)的情況下不使用該參數(shù)。fn：綁定的事件處理程序。在 3.0 版本被廢棄使用。2unbind 移除綁定 在jQuery中，為元素移除綁定事件可以使用unbind()方法，該方法的語(yǔ)法結(jié)構(gòu)如下：unbind(type,data) type：可選參數(shù)

6、，用于指定事件類(lèi)型。data：可選參數(shù)，用于指定要從每個(gè)匹配元素的事件中反綁定的事件處理函數(shù)。在 3.0 版本被廢棄使用。3one 綁定一次性事件處理 在 jQuery 中，為元素綁定一次性事件處理可以使用 one()方法。one()方法為每一個(gè)匹配元素的特定事件（如click）綁定一個(gè)一次性的事件處理函數(shù)。在每個(gè)對(duì)象上，這個(gè)事件處理函數(shù)只會(huì)被執(zhí)行一次。其他規(guī)則與 bind()函數(shù)相同。這個(gè)事件處理函數(shù)會(huì)接收到一個(gè)事件對(duì)象，可以通過(guò)它來(lái)阻止（瀏覽器）默認(rèn)的行為。如果既想取消默認(rèn)的行為，又想阻止事件起泡，這個(gè)事件處理函數(shù)必須返回 false。 該方法的語(yǔ)法結(jié)構(gòu)如下：one(type,data,f

7、n) type：用于指定事件類(lèi)型。data：可選參數(shù)，作為 event.data 屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。fn：綁定到每個(gè)匹配元素的事件上面的處理函數(shù)。4on 綁定一次或多次事件處理 在 jQuery 中，為元素綁定一個(gè)或多個(gè)事件處理可以使用 on()方法。on()方法綁定事件處理程序到當(dāng)前選定的 jQuery 對(duì)象中的元素，在 jQuery 1.7 版本中添加了該方法。該方法的語(yǔ)法結(jié)構(gòu)如下：on(events,selector,data,fn) events：一個(gè)或多個(gè)用空格分隔的事件類(lèi)型和可選的命名空間，如click事件。selector：可選參數(shù)。data：當(dāng)一個(gè)事件被觸發(fā)時(shí)

8、要傳遞 event.data 給事件處理函數(shù)。fn：該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。當(dāng) fn=false 時(shí)可以做一個(gè)函數(shù)的簡(jiǎn)寫(xiě)，返回值為 false。5off 移除一次或多次事件處理 在 jQuery 中，在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)時(shí)可以使用 off()方法，可以用 off() 方法移除用.on()綁定的事件處理程序，在 jQuery 1.7 版本中添加了該方法。該方法的語(yǔ)法結(jié)構(gòu)如下：off(events,selector,fn) events：一個(gè)或多個(gè)用空格分隔的事件類(lèi)型和可選的命名空間，如click事件。selector：一個(gè)最初傳遞到.on()事件處理程序附加的選擇器。f

9、n：事件處理程序函數(shù)以前附加事件上，或特殊值 false。5.1.4 模擬用戶(hù)操作 在 jQuery 中提供了模擬用戶(hù)的操作觸發(fā)事件、模仿懸停事件和模擬鼠標(biāo)連續(xù)單擊事件 3 種模擬用戶(hù)操作的方法。1模擬用戶(hù)的操作觸發(fā)事件 在 jQuery 中一般常用 triggerHandler()方法和 trigger()方法來(lái)模擬用戶(hù)的操作觸發(fā)事件。例如，可以使用下面的代碼來(lái)觸發(fā) id 為 button 的按鈕的 click 事件。$(#button).trigger(click); TriggerHandler()方法的語(yǔ)法格式與 trigger()方法完全相同。所不同的是：triggerHandler

10、()方法不會(huì)導(dǎo)致瀏覽器同名的默認(rèn)行為被執(zhí)行，而 trigger()方法會(huì)導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行。例如，使用 trigger()觸發(fā)一個(gè)名稱(chēng)為 submit 的事件，同樣會(huì)導(dǎo)致瀏覽器執(zhí)行提交表單的操作。要阻止瀏覽器的默認(rèn)行為，只需要返回false。另外，使用 trigger()方法和 triggerHandler()方法還可以觸發(fā) bind()綁定的自定義事件，并且還可以為事件傳遞參數(shù)。2模仿懸停事件 模仿懸停事件是指模仿鼠標(biāo)指針移動(dòng)到一個(gè)對(duì)象上面又從該對(duì)象上面移出的事件，可以通過(guò) jQuery 提供的hover(over,out)方法實(shí)現(xiàn)。hover()方法的語(yǔ)法結(jié)構(gòu)如下：hover(

11、over,out) over：用于指定當(dāng)鼠標(biāo)指針在移動(dòng)到匹配元素上時(shí)觸發(fā)的函數(shù)。out：用于指定當(dāng)鼠標(biāo)指針在移出匹配元素上時(shí)觸發(fā)的函數(shù)。 當(dāng)鼠標(biāo)指針移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第 1 個(gè)函數(shù)。當(dāng)鼠標(biāo)指針移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第 2 個(gè)函數(shù)。而且，會(huì)伴隨著對(duì)鼠標(biāo)指針是否仍然處在特定元素中的檢測(cè)（例如，處在 div 的圖像中），如果是，則會(huì)繼續(xù)保持“懸?！睜顟B(tài)，而不觸發(fā)移出事件。5.1.5 事件捕獲與事件冒泡 事件捕獲和事件冒泡都是一種事件模型，DOM 標(biāo)準(zhǔn)規(guī)定應(yīng)該同時(shí)使用這兩個(gè)模型：首先事件要從 DOM樹(shù)頂層的元素到 DOM 樹(shù)底層的元素進(jìn)行捕獲，然后再通過(guò)事件冒泡返回到 DO

12、M 樹(shù)的頂層。 在標(biāo)準(zhǔn)事件模型中，事件處理程序既可以注冊(cè)到事件捕獲階段，也可以注冊(cè)到事件冒泡階段。但是并不是所有的瀏覽器都支持標(biāo)準(zhǔn)的事件模型，大部分瀏覽器默認(rèn)都把事件注冊(cè)在事件冒泡階段，所以 jQuery 始終會(huì)在事件冒泡階段注冊(cè)事件處理程序。1什么是事件捕獲與事件冒泡 圖 5-7、圖 5-8 和圖 5-9 展示了鼠標(biāo)指針在不同元素上懸停時(shí)的效果。圖 5-6 頁(yè)面結(jié)構(gòu) 圖 5-7 鼠標(biāo)指針懸停在 span 元素上的效果圖 5-8 鼠標(biāo)指針懸停在 p 元素上的效果 圖 5-9 鼠標(biāo)指針懸停在 div 元素上的效果 從上面的運(yùn)行結(jié)果中可以看到，當(dāng)鼠標(biāo)指針在span元素上時(shí)，3個(gè)元素都被加上了紅色邊

13、框。說(shuō)明在響應(yīng)span元素的mouseover事件的同時(shí)，其他兩個(gè)元素的mouseover事件也被響應(yīng)。觸發(fā)span元素的事件時(shí)，瀏覽器最先響應(yīng)的將是span元素的事件，其次是p元素，最后是div元素。在瀏覽器中事件響應(yīng)的順序如圖5-10所示。這種事件的響應(yīng)順序就叫做事件冒泡。事件冒泡是從DOM樹(shù)的頂層向下進(jìn)行事件響應(yīng)。 另一種相反的策略就是事件捕獲，事件捕獲是從DOM 樹(shù)的底層向上進(jìn)行事件響應(yīng)，事件捕獲的順序如圖5-11所示。圖 5-10 事件冒泡（由具體到一般） 圖 5-11 事件捕獲（由一般到具體）2事件對(duì)象 通常情況下，在不同瀏覽器中獲取事件對(duì)象是比較困難的。針對(duì)這個(gè)問(wèn)題，jQuery

14、 進(jìn)行了必要的處理，使得在任何瀏覽器中都能輕松地獲取事件對(duì)象以及事件對(duì)象的一些屬性。 在程序中使用事件對(duì)象非常的簡(jiǎn)單，只要為函數(shù)添加一個(gè)參數(shù)即可。 具體 jQuery 代碼如下：$(element).bind(mouseout,function(event) / event：事件對(duì)象 / 省略部分代碼 ) 當(dāng)單擊“element”元素時(shí)，事件對(duì)象就被創(chuàng)建，該事件對(duì)象只有事件處理函數(shù)才可以訪(fǎng)問(wèn)到。事件處理函數(shù)執(zhí)行完畢后，事件對(duì)象就被銷(xiāo)毀了。3阻止事件冒泡 事件冒泡會(huì)經(jīng)常導(dǎo)致一些令開(kāi)發(fā)人員頭疼的問(wèn)題，所以必要的時(shí)候，需要阻止事件的冒泡。要解決這個(gè)問(wèn)題，就必須訪(fǎng)問(wèn)事件對(duì)象。事件對(duì)象提供了一個(gè)stop

15、Propagation()方法，使用該方法可以阻止事件冒泡。 阻止例 5-5 的程序的事件冒泡，可以在每個(gè)事件處理程序中加入一句代碼，例如：$(.test1).mouseover(function(event) $(.test1).addClass(redBorder); event.stopPropagation(); / 阻止冒泡事件 ); 由于 stopPropagation()方法是跨瀏覽器的，所以不必?fù)?dān)心它的兼容性。 添加了阻止事件冒泡代碼的例 5-5 的運(yùn)行效果如圖 5-12 所示。 當(dāng)鼠標(biāo)指針在 span 元素上時(shí)，只有 span 元素被加上了紅色邊框，說(shuō)明只有 span 元素響

16、應(yīng) mouseover 事件，程序成功阻止了事件冒泡。圖 5-12 阻止事件冒泡后的效果4阻止瀏覽器默認(rèn)行為 網(wǎng)頁(yè)中的元素有自己的默認(rèn)行為，例如，在表單驗(yàn)證的時(shí)候，表單的某些內(nèi)容沒(méi)有通過(guò)驗(yàn)證，但是在單擊了提交按鈕以后表單還是會(huì)提交。這時(shí)就需要阻止瀏覽器的默認(rèn)操作。在 jQuery 中，應(yīng)用 preventDefault()方法可以阻止瀏覽器的默認(rèn)行為。 在事件處理程序中加入下面代碼就可以阻止默認(rèn)行為：event. preventDefault () / 阻止瀏覽器默認(rèn)操作 如果想同時(shí)停止事件冒泡和瀏覽器默認(rèn)行為，可以在事件處理程序中返回 false。即：return false; / 阻止事件

17、冒泡和瀏覽器默認(rèn)操作 這是同時(shí)調(diào)用stopPropagation()和preventDefault()方法的一種簡(jiǎn)要寫(xiě)法。5事件對(duì)象的屬性 在 jQuery 中對(duì)事件屬性也進(jìn)行了封裝，使得事件處理在各大瀏覽器下都可以正常運(yùn)行而不需要對(duì)瀏覽器類(lèi)型進(jìn)行判斷。（1）event.type。（2）event.preventDefault()方法是阻止默認(rèn)的事件行為，event.stopPrepagation()方法是用來(lái)阻止事件冒泡的。（3）event.target。（4）event.relatedTarget。（5）event.pageX 和 event.pageY。5.2 jQuery 中的動(dòng)畫(huà)效果

18、 基本的動(dòng)畫(huà)效果指的是元素的隱藏和顯示。在 jQuery 中提供了兩種控制元素隱藏和顯示的方法，一種是分別隱藏和顯示匹配元素，另一種是切換元素的可見(jiàn)狀態(tài)，也就是如果元素是可見(jiàn)的，切換為隱藏；如果元素是隱藏的，切換為可見(jiàn)的。5.2.1 隱藏匹配元素 使用 hide()方法可以隱藏匹配的元素。hide()方法相當(dāng)于將元素 CSS 樣式屬性 display 的值設(shè)置為 none，它會(huì)記住原來(lái)的 display 的值。hide()方法有兩種語(yǔ)法格式，一種是不帶參數(shù)的形式，用于實(shí)現(xiàn)不帶任何效果的隱藏匹配元素，其語(yǔ)法格式如下：hide() 另一種是帶參數(shù)的形式，用于以?xún)?yōu)雅的動(dòng)畫(huà)隱藏所有匹配的元素，并在隱藏

19、完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)，其語(yǔ)法格式如下：hide(speed,callback)speed：用于指定動(dòng)畫(huà)的時(shí)長(zhǎng)?？梢允菙?shù)字，也就是元素經(jīng)過(guò)多少毫秒（1000 毫秒=1 秒）后完全隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定隱藏完成后要觸發(fā)的回調(diào)函數(shù)。5.2.2 顯示匹配元素 使用 show()方法可以顯示匹配的元素。show()方法相當(dāng)于將元素 CSS 樣式屬性 display 的值設(shè)置為 block 或inline 或除了 none 以外的值，它會(huì)恢復(fù)為應(yīng)用 display:none

20、之前的可見(jiàn)屬性。show()方法有兩種語(yǔ)法格式，一種是不帶參數(shù)的形式，用于實(shí)現(xiàn)不帶任何效果的顯示匹配元素，其語(yǔ)法格式如下：show() 另一種是帶參數(shù)的形式，用于以?xún)?yōu)雅的動(dòng)畫(huà)顯示所有匹配的元素，并在顯示完成后可選擇地觸發(fā)一個(gè)回調(diào)函數(shù)，其語(yǔ)法格式如下：show(speed,callback) speed：用于指定動(dòng)畫(huà)的時(shí)長(zhǎng)?？梢允菙?shù)字，也就是元素經(jīng)過(guò)多少毫秒（1000 毫秒=1 秒）后完全顯示。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定顯示完成后要觸發(fā)的回調(diào)函數(shù)。5.2.3 切換元素的可見(jiàn)狀態(tài) 使用

21、 toggle()方法可以切換元素的可見(jiàn)狀態(tài)，也就是說(shuō)如果元素是可見(jiàn)的，切換為隱藏；如果元素是隱藏的，切換為可見(jiàn)。toggle()方法的語(yǔ)法格式如下：toggle();5.2.4 淡入淡出的動(dòng)畫(huà)效果 如果在顯示或隱藏元素時(shí)不需要改變?cè)氐母叨群蛯挾?，只單?dú)改變?cè)氐耐该鞫鹊臅r(shí)候，就需要使用淡入淡出的動(dòng)畫(huà)效果了。jQuery中提供了表5-2所示的實(shí)現(xiàn)淡入淡出動(dòng)畫(huà)效果的方法。表 5-2 實(shí)現(xiàn)淡入淡出動(dòng)畫(huà)效果的方法 這 3 種方法都可以為其指定速度參數(shù)，參數(shù)的規(guī)則與 hide()方法和 show()方法的速度參數(shù)一致。在使用fadeTo()方法指定不透明度時(shí)，參數(shù)只能是 0 到 1 之間的數(shù)字，0

22、表示完全透明，1 表示完全不透明，數(shù)值越小圖片的可見(jiàn)性就越差。5.2.5 滑動(dòng)效果 在 jQuery 中，提供了 slideDown()方法（用于滑動(dòng)顯示匹配的元素）、slideUp()方法（用于滑動(dòng)隱藏匹配的元素）和 slideToggle()方法（用于通過(guò)高度的變化動(dòng)態(tài)切換元素的可見(jiàn)性）來(lái)實(shí)現(xiàn)滑動(dòng)效果。1滑動(dòng)顯示匹配的元素 使用 slideDown()方法可以向下增加元素高度，動(dòng)態(tài)顯示匹配的元素。slideDown()方法會(huì)逐漸向下增加匹配的隱藏元素的高度，直到元素完全顯示為止。slideDown()方法的語(yǔ)法格式如下：slideDown(speed,callback)speed：用于指定

23、動(dòng)畫(huà)的時(shí)長(zhǎng)?？梢允菙?shù)字，也就是元素經(jīng)過(guò)多少毫秒（1000 毫秒=1 秒）后完全顯示。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定顯示完成后要觸發(fā)的回調(diào)函數(shù)。2滑動(dòng)隱藏匹配的元素 使用 slideUp()方法可以向上減少元素高度，動(dòng)態(tài)隱藏匹配的元素。slideUp()方法會(huì)逐漸向上減少匹配的顯示元素的高度，直到元素完全隱藏為止。slideUp()方法的語(yǔ)法格式如下：slideUp(speed,callback) speed：用于指定動(dòng)畫(huà)的時(shí)長(zhǎng)。可以是數(shù)字，也就是元素經(jīng)過(guò)多少毫秒（1000 毫秒=1 秒

24、）后完全隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定隱藏完成后要觸發(fā)的回調(diào)函數(shù)。3通過(guò)高度的變化動(dòng)態(tài)切換元素的可見(jiàn)性 通過(guò) slideToggle()方法可以實(shí)現(xiàn)通過(guò)高度的變化動(dòng)態(tài)切換元素的可見(jiàn)性。在使用 slideToggle()方法時(shí)，如果元素是可見(jiàn)的，就通過(guò)減小高度使全部元素隱藏，如果元素是隱藏的，就增加元素的高度使元素最終全部可見(jiàn)。slideToggle()方法的語(yǔ)法格式如下：slideToggle(speed,callback)speed：用于指定動(dòng)畫(huà)的時(shí)長(zhǎng)。可以是數(shù)字，也就是元素經(jīng)

25、過(guò)多少毫秒（1000 毫秒=1 秒）后完全顯示或隱藏。也可以是默認(rèn)參數(shù) slow（600 毫秒）、normal（400 毫秒）和 fast（200 毫秒）。 callback：可選參數(shù)，用于指定動(dòng)畫(huà)完成時(shí)觸發(fā)的回調(diào)函數(shù)。5.2.6 自定義的動(dòng)畫(huà)效果1使用 animate()方法創(chuàng)建自定義動(dòng)畫(huà) animate()方法的操作更加自由，可以隨意控制元素的屬性，實(shí)現(xiàn)更加絢麗的動(dòng)畫(huà)效果。jQuery 1.8 版本中加入了該方法。animate()方法的基本語(yǔ)法格式如下：animate(params,speed,callback) params：表示一個(gè)包含屬性和值的映射，可以同時(shí)包含多個(gè)屬性，例如lef

26、t:200px, top:100px。 speed：表示動(dòng)畫(huà)運(yùn)行的速度，參數(shù)規(guī)則同其他動(dòng)畫(huà)效果的 speed 一致，它是一個(gè)可選參數(shù)。callback：表示一個(gè)回調(diào)函數(shù)，當(dāng)動(dòng)畫(huà)效果運(yùn)行完畢后執(zhí)行該回調(diào)函數(shù)，它也是一個(gè)可選參數(shù)。2使用 stop()方法停止動(dòng)畫(huà) stop()方法也屬于自定義動(dòng)畫(huà)函數(shù)，它會(huì)停止匹配元素正在運(yùn)行的動(dòng)畫(huà)，并立即執(zhí)行動(dòng)畫(huà)隊(duì)列中的下一個(gè)動(dòng)畫(huà)。jQuery 1.7 版本中加入了該方法。stop()方法的語(yǔ)法格式如下：stop(clearQueue,gotoEnd) clearQueue：表示是否清空尚未執(zhí)行完的動(dòng)畫(huà)隊(duì)列（值為 true 時(shí)表示清空動(dòng)畫(huà)隊(duì)列）。 gotoEnd：

27、表示是否讓正在執(zhí)行的動(dòng)畫(huà)直接到達(dá)動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)（值為 true 時(shí)表示直接到達(dá)動(dòng)畫(huà)結(jié)束時(shí)狀態(tài)）。3判斷元素是否處于動(dòng)畫(huà)狀態(tài) 使用 animate()方法時(shí)，當(dāng)用戶(hù)快速在某個(gè)元素上執(zhí)行 animate()動(dòng)畫(huà)時(shí)，就會(huì)出現(xiàn)動(dòng)畫(huà)累積。解決這個(gè)問(wèn)題的方法是判斷元素是否正處于動(dòng)畫(huà)狀態(tài)，如果不處于動(dòng)畫(huà)狀態(tài)才為元素添加新的動(dòng)畫(huà)，否則不添加。具體代碼如下：if(!$(element).is(:animated) / 判斷元素是否處于動(dòng)畫(huà)狀態(tài)，如果沒(méi)有處于動(dòng)畫(huà)狀態(tài)，則添加新的動(dòng)畫(huà) 判斷是否處于動(dòng)畫(huà)狀態(tài)這個(gè)方法在 animate()動(dòng)畫(huà)中會(huì)經(jīng)常使用到，讀者需要特別注意和掌握。4延遲動(dòng)畫(huà)的執(zhí)行 在動(dòng)畫(huà)執(zhí)行的過(guò)程中

28、，我們經(jīng)常會(huì)對(duì)動(dòng)畫(huà)進(jìn)行延遲操作，這時(shí)就需要使用到 delay()方法。 delay()方法允許將隊(duì)列中的函數(shù)延遲執(zhí)行，它既可以推遲動(dòng)畫(huà)隊(duì)列中函數(shù)的執(zhí)行，也可以用于自定義隊(duì)列。5使用 finish 停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà) 使用finish ()方法時(shí)，可以停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)，并且刪除所有其他的對(duì)話(huà)。.finish()方法和.stop(true, true)類(lèi)似，.stop(true, true)將清除隊(duì)列，并且目前的動(dòng)畫(huà)跳轉(zhuǎn)到其最終值，而.finish() 會(huì)導(dǎo)致所有排隊(duì)的動(dòng)畫(huà)的 CSS屬性跳轉(zhuǎn)到它們的最終值。它是在 jQuery 1.9 版本中加入的。具體代碼如下：$(.container ).click(function() $(div).finish(); );5.3 綜合實(shí)例：實(shí)現(xiàn)圖片傳送帶 所謂圖片傳送帶是指在頁(yè)面的指定位置固定顯示一定數(shù)量的圖片（其他圖片隱藏），單擊最左邊的圖片時(shí)，全部圖片均向左移動(dòng)一張圖片的位置，單擊最右邊的圖片時(shí)，全部圖片均向右移動(dòng)一張圖片的位置，這樣既可以查看到全部圖片，又能節(jié)省頁(yè)面空間，比較實(shí)用。運(yùn)行本實(shí)例，將顯示圖 5-23 所示的效果