jQeury淡入淡出需要注意的問題
更新時間:2010年09月08日 10:06:25 作者:
寫了好多篇的學習筆記。也該動手練練,咱不能總是紙上談兵。最近做了其他的一些練習,也是有涉及圖片淡入淡出的,使用的是animate。
前兩天看到橡樹小屋朋友發(fā)表的《JQuery 實現(xiàn)圖片輪播效果》,比較有趣,發(fā)現(xiàn)他是使用fadeIn和fadeOut實現(xiàn)圖片淡入淡出輪換的。當時曾擔心他的例子中如果連續(xù)多次點擊,所產(chǎn)生的動畫會不會有延時。但我連續(xù)點擊了幾下,沒看到明顯的延時,就沒再多想。
眾所周知,jQuery所產(chǎn)生的動畫效果默認會進入列隊的。假如:點擊一下,產(chǎn)生動畫3秒鐘。然后我快速的連點3次。那么要等到9秒鐘,所有動畫才能結(jié)束。animate是自定義動畫,可以很容易的設(shè)定動畫是否進入列隊。但使用fadeIn和fadeOut就麻煩了。
看到有的Flash網(wǎng)站的圖標,鼠標一放上去圖標就緩緩變了,移開又會緩緩變回來,很是漂亮。我打算用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>
這樣第一張就會覆蓋第二張圖片,那我只要淡入淡出第一張圖片就能實現(xiàn)特效了。于是就使用了hover,fadeIn和fadeOut,簡單的實現(xiàn)了
$(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.
我想如果不停的移入移出,那么就會刪除上一個操作在列隊中的動畫。這樣就會執(zhí)行最后的動畫了。
function () { $("#1").dequeue().fadeOut(1000); },
function () { $("#1").dequeue().fadeIn(1000); }
可是更麻煩的情況出現(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.
function () { $("#1").stop().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }
我停止前面所有的列隊,總算可以了吧!但是卻出現(xiàn)了圖片淡到一半,不動了!就像兩個圖片疊加顯示了一樣。
又是怎么回事?
直到我在stop中加參數(shù),圖片才能正常顯示。
clearqueue (可選)boolean
如果設(shè)置成true,則清空隊列。可以立即結(jié)束動畫。
gotoend (可選)boolean
讓當前正在執(zhí)行的動畫立即完成,并且重設(shè)show和hide的原始樣式,調(diào)用回調(diào)函數(shù)等。
function () { $("#1").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }
但這樣就會出現(xiàn)執(zhí)行完畢,突然顯示整圖的情況,就沒有了淡入淡出的那樣的效果了。
沒辦法,只有使用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 }); }
這才實現(xiàn)了想要的完美效果。
總結(jié)一下,使用stop和dequeue理論都是可以的,但為什么卻出錯?我也不太清楚,估計是jQuery庫的問題吧,
這個要查原文件才找得到問題。但以后使用fadeIn和fadeOut真的注意一下。當然,到橡樹小屋朋友的
《JQuery實現(xiàn)圖片輪播效果》肯定是個好例子,直到我把時間改到2000才看出來有延遲的。只有我故意找毛病的人才會
這么干,其他哪還有人會設(shè)這么長的時間的。有興趣的朋友可以去橡樹小屋那學習一下,既簡單又漂亮實用的例子。
眾所周知,jQuery所產(chǎn)生的動畫效果默認會進入列隊的。假如:點擊一下,產(chǎn)生動畫3秒鐘。然后我快速的連點3次。那么要等到9秒鐘,所有動畫才能結(jié)束。animate是自定義動畫,可以很容易的設(shè)定動畫是否進入列隊。但使用fadeIn和fadeOut就麻煩了。
看到有的Flash網(wǎng)站的圖標,鼠標一放上去圖標就緩緩變了,移開又會緩緩變回來,很是漂亮。我打算用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>
這樣第一張就會覆蓋第二張圖片,那我只要淡入淡出第一張圖片就能實現(xiàn)特效了。于是就使用了hover,fadeIn和fadeOut,簡單的實現(xiàn)了
復制代碼 代碼如下:
$(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.
我想如果不停的移入移出,那么就會刪除上一個操作在列隊中的動畫。這樣就會執(zhí)行最后的動畫了。
復制代碼 代碼如下:
function () { $("#1").dequeue().fadeOut(1000); },
function () { $("#1").dequeue().fadeIn(1000); }
可是更麻煩的情況出現(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.
復制代碼 代碼如下:
function () { $("#1").stop().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }
我停止前面所有的列隊,總算可以了吧!但是卻出現(xiàn)了圖片淡到一半,不動了!就像兩個圖片疊加顯示了一樣。
又是怎么回事?
直到我在stop中加參數(shù),圖片才能正常顯示。
clearqueue (可選)boolean
如果設(shè)置成true,則清空隊列。可以立即結(jié)束動畫。
gotoend (可選)boolean
讓當前正在執(zhí)行的動畫立即完成,并且重設(shè)show和hide的原始樣式,調(diào)用回調(diào)函數(shù)等。
復制代碼 代碼如下:
function () { $("#1").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }
但這樣就會出現(xiàn)執(zhí)行完畢,突然顯示整圖的情況,就沒有了淡入淡出的那樣的效果了。
沒辦法,只有使用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 }); }
這才實現(xiàn)了想要的完美效果。
總結(jié)一下,使用stop和dequeue理論都是可以的,但為什么卻出錯?我也不太清楚,估計是jQuery庫的問題吧,
這個要查原文件才找得到問題。但以后使用fadeIn和fadeOut真的注意一下。當然,到橡樹小屋朋友的
《JQuery實現(xiàn)圖片輪播效果》肯定是個好例子,直到我把時間改到2000才看出來有延遲的。只有我故意找毛病的人才會
這么干,其他哪還有人會設(shè)這么長的時間的。有興趣的朋友可以去橡樹小屋那學習一下,既簡單又漂亮實用的例子。
相關(guān)文章
JQuery $.each遍歷JavaScript數(shù)組對象實例
聲明了一個JSON字符串直接遍歷,在Chrome控制臺下面報錯,解決方法是將JSON字符串轉(zhuǎn)換為JavaScript對象2014-09-09
Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度
本文給大家分享的是Jquery實現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度,這些在平時的項目中挺實用的,所以抽空封裝了一個文本框根據(jù)輸入內(nèi)容自適應(yīng)高度的插件,這里推薦給小伙伴們。2015-04-04
JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁
這篇文章主要介紹了JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁的解決方案,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06

