前兩天看到橡樹小屋朋友發表的《JQuery 實現圖片輪播效果》，比較有趣，發現他是使用fadeIn和fadeOut實現圖片淡入淡出輪換的。當時曾擔心他的例子中如果連續多次點擊，所產生的動畫會不會有延時。但我連續點擊了幾下，沒看到明顯的延時，就沒再多想。
眾所周知，jQuery所產生的動畫效果默認會進入列隊的。假如：點擊一下，產生動畫3秒鐘。然後我快速的連點3次。那麼要等到9秒鐘，所有動畫才能結束。animate是自定義動畫，可以很容易的設定動畫是否進入列隊。但使用fadeIn和fadeOut就麻煩了。
看到有的Flash網站的圖標，鼠標一放上去圖標就緩緩變了，移開又會緩緩變回來，很是漂亮。我打算用jQuery也做做看，能不能做出類似的效果。因為自己練手，就隨便拉兩張圖片：
代碼如下:
<div id="div">
<img id="1" src="florian.jpg" style= "position:absolute;z-index:2;left:10px;top:10px;"/>
<img id="2" src="kamil.jpg" style= "position:absolute;z-index:1;left:10px;top:10px;"/>
</div>
這樣第一張就會覆蓋第二張圖片，那我只要淡入淡出第一張圖片就能實現特效了。於是就使用了hover,fadeIn和fadeOut，簡單的實現了
代碼如下:
$(document).ready(function () {
$("div").hover(
function () { $("#1").fadeOut(1000); },
function () { $("#1").fadeIn(1000); }
);
});
但這樣問題出來了，如果我在圖片上不停地快速的移入移出鼠標。那麼動畫都進入列隊了，那麼動畫就會一直在動，很是不好看。
於是我打算使用：dequeue（），定義：Removes a queued function from the front of the queue and executes it.
我想如果不停的移入移出，那麼就會刪除上一個操作在列隊中的動畫。這樣就會執行最後的動畫了。
代碼如下:
function () { $("#1").dequeue().fadeOut(1000); },
function () { $("#1").dequeue().fadeIn(1000); }
可是更麻煩的情況出現了，當不停地移入移出鼠標時，有時圖片都沒了，有時不變了。怎麼回事？
然後又想到使用:stop(),定義：
Stops all the currently running animations on all the specified elements.
If any animations are queued to run, then they will begin immediately.
代碼如下:
function () { $("#1").stop().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }
我停止前面所有的列隊，總算可以了吧！但是卻出現了圖片淡到一半，不動了！就像兩個圖片疊加顯示了一樣。
又是怎麼回事？
直到我在stop中加參數，圖片才能正常顯示。
clearqueue (可選)boolean
如果設置成true，則清空隊列。可以立即結束動畫。
gotoend (可選)boolean
讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回調函數等。
代碼如下:
function () { $("#1").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }
但這樣就會出現執行完畢，突然顯示整圖的情況，就沒有了淡入淡出的那樣的效果了。
沒辦法，只有使用animate了。
代碼如下:
function () { $("#1").stop().animate({ 'opacity': 0 }, 1000); },
function () { $("#1").stop().animate({'opacity':1}, 1000); }
或：
function () { $("#1").animate({ 'opacity': 0 }, { queue: false, duration: 1000 }); },
function () { $("#1").animate({ 'opacity': 1 }, { queue: false, duration: 1000 }); }
這才實現了想要的完美效果。
總結一下，使用stop和dequeue理論都是可以的，但為什麼卻出錯？我也不太清楚，估計是jQuery庫的問題吧，
這個要查原文件才找得到問題。但以後使用fadeIn和fadeOut真的注意一下。當然，到橡樹小屋朋友的
《JQuery實現圖片輪播效果》肯定是個好例子，直到我把時間改到2000才看出來有延遲的。只有我故意找毛病的人才會
這麼干，其他哪還有人會設這麼長的時間的。有興趣的朋友可以去橡樹小屋那學習一下，既簡單又漂亮實用的例子。