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

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

但這樣問題出來了，如果我在圖片上不停地快速的移入移出鼠標。那么動畫都進入列隊了，那么動畫就會一直在動，很是不好看。

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

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

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

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

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

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

最新評論