前兩天看到橡樹小屋朋友發(fā)表的《JQuery 實(shí)現(xiàn)圖片輪播效果》，比較有趣，發(fā)現(xiàn)他是使用fadeIn和fadeOut實(shí)現(xiàn)圖片淡入淡出輪換的。當(dāng)時(shí)曾擔(dān)心他的例子中如果連續(xù)多次點(diǎn)擊，所產(chǎn)生的動(dòng)畫會(huì)不會(huì)有延時(shí)。但我連續(xù)點(diǎn)擊了幾下，沒看到明顯的延時(shí)，就沒再多想。
　　眾所周知，jQuery所產(chǎn)生的動(dòng)畫效果默認(rèn)會(huì)進(jìn)入列隊(duì)的。假如：點(diǎn)擊一下，產(chǎn)生動(dòng)畫3秒鐘。然后我快速的連點(diǎn)3次。那么要等到9秒鐘，所有動(dòng)畫才能結(jié)束。animate是自定義動(dòng)畫，可以很容易的設(shè)定動(dòng)畫是否進(jìn)入列隊(duì)。但使用fadeIn和fadeOut就麻煩了。
　　看到有的Flash網(wǎng)站的圖標(biāo)，鼠標(biāo)一放上去圖標(biāo)就緩緩變了，移開又會(huì)緩緩變回來，很是漂亮。我打算用jQuery也做做看，能不能做出類似的效果。因?yàn)樽约壕毷?，就隨便拉兩張圖片：

這樣第一張就會(huì)覆蓋第二張圖片，那我只要淡入淡出第一張圖片就能實(shí)現(xiàn)特效了。于是就使用了hover,fadeIn和fadeOut，簡單的實(shí)現(xiàn)了

但這樣問題出來了，如果我在圖片上不停地快速的移入移出鼠標(biāo)。那么動(dòng)畫都進(jìn)入列隊(duì)了，那么動(dòng)畫就會(huì)一直在動(dòng)，很是不好看。

于是我打算使用：dequeue（），定義：Removes a queued function from the front of the queue and executes it.
我想如果不停的移入移出，那么就會(huì)刪除上一個(gè)操作在列隊(duì)中的動(dòng)畫。這樣就會(huì)執(zhí)行最后的動(dòng)畫了。

可是更麻煩的情況出現(xiàn)了，當(dāng)不停地移入移出鼠標(biāo)時(shí)，有時(shí)圖片都沒了，有時(shí)不變了。怎么回事？

然后又想到使用:stop(),定義：
Stops all the currently running animations on all the specified elements.
If any animations are queued to run, then they will begin immediately.

我停止前面所有的列隊(duì)，總算可以了吧！但是卻出現(xiàn)了圖片淡到一半，不動(dòng)了！就像兩個(gè)圖片疊加顯示了一樣。
又是怎么回事？
　　直到我在stop中加參數(shù)，圖片才能正常顯示。
　　clearqueue (可選)boolean
　　如果設(shè)置成true，則清空隊(duì)列。可以立即結(jié)束動(dòng)畫。
　　gotoend (可選)boolean
　　讓當(dāng)前正在執(zhí)行的動(dòng)畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。

但這樣就會(huì)出現(xiàn)執(zhí)行完畢，突然顯示整圖的情況，就沒有了淡入淡出的那樣的效果了。
　　沒辦法，只有使用animate了。

這才實(shí)現(xiàn)了想要的完美效果。
　　
　　總結(jié)一下，使用stop和dequeue理論都是可以的，但為什么卻出錯(cuò)？我也不太清楚，估計(jì)是jQuery庫的問題吧，
這個(gè)要查原文件才找得到問題。但以后使用fadeIn和fadeOut真的注意一下。當(dāng)然，到橡樹小屋朋友的
《JQuery實(shí)現(xiàn)圖片輪播效果》肯定是個(gè)好例子，直到我把時(shí)間改到2000才看出來有延遲的。只有我故意找毛病的人才會(huì)
這么干，其他哪還有人會(huì)設(shè)這么長的時(shí)間的。有興趣的朋友可以去橡樹小屋那學(xué)習(xí)一下，既簡單又漂亮實(shí)用的例子。

最新評論