jQeury淡入淡出需要注意的問題

2019-11-21 00:15:23

字體：大中小

來源：轉載

供稿：網友

前兩天看到橡樹小屋朋友發表的《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才看出來有延遲的。只有我故意找毛病的人才會
這么干，其他哪還有人會設這么長的時間的。有興趣的朋友可以去橡樹小屋那學習一下，既簡單又漂亮實用的例子。

上一篇：Javascript的一種模塊模式

下一篇：jQuery之浮動窗口實現代碼(兩種方法)