jQeury淡入淡出需要注意的問題
更新時間:2010年09月08日 10:06:25 作者:
寫了好多篇的學(xué)習筆記。也該動手練練,咱不能總是紙上談兵。最近做了其他的一些練習,也是有涉及圖片淡入淡出的,使用的是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,則清空隊列??梢粤⒓唇Y(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è)這么長的時間的。有興趣的朋友可以去橡樹小屋那學(xué)習一下,既簡單又漂亮實用的例子。
眾所周知,jQuery所產(chǎn)生的動畫效果默認會進入列隊的。假如:點擊一下,產(chǎn)生動畫3秒鐘。然后我快速的連點3次。那么要等到9秒鐘,所有動畫才能結(jié)束。animate是自定義動畫,可以很容易的設(shè)定動畫是否進入列隊。但使用fadeIn和fadeOut就麻煩了。
看到有的Flash網(wǎng)站的圖標,鼠標一放上去圖標就緩緩變了,移開又會緩緩變回來,很是漂亮。我打算用jQuery也做做看,能不能做出類似的效果。因為自己練手,就隨便拉兩張圖片:
復(fù)制代碼 代碼如下:
<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)了
復(fù)制代碼 代碼如下:
$(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í)行最后的動畫了。
復(fù)制代碼 代碼如下:
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.
復(fù)制代碼 代碼如下:
function () { $("#1").stop().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }
我停止前面所有的列隊,總算可以了吧!但是卻出現(xiàn)了圖片淡到一半,不動了!就像兩個圖片疊加顯示了一樣。
又是怎么回事?
直到我在stop中加參數(shù),圖片才能正常顯示。
clearqueue (可選)boolean
如果設(shè)置成true,則清空隊列??梢粤⒓唇Y(jié)束動畫。
gotoend (可選)boolean
讓當前正在執(zhí)行的動畫立即完成,并且重設(shè)show和hide的原始樣式,調(diào)用回調(diào)函數(shù)等。
復(fù)制代碼 代碼如下:
function () { $("#1").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }
但這樣就會出現(xiàn)執(zhí)行完畢,突然顯示整圖的情況,就沒有了淡入淡出的那樣的效果了。
沒辦法,只有使用animate了。
復(fù)制代碼 代碼如下:
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è)這么長的時間的。有興趣的朋友可以去橡樹小屋那學(xué)習一下,既簡單又漂亮實用的例子。
相關(guān)文章
jQuery實現(xiàn)側(cè)邊導(dǎo)航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側(cè)邊導(dǎo)航欄以及滑動電梯效果,文中的示例代碼講解詳細,感興趣的小伙伴可以動手試一試2022-03-03jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法
這篇文章主要介紹了jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法以及替代方法,需要的朋友可以參考下2014-05-05dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)
這篇文章主要介紹了dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)
這篇文章主要介紹了利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)的方法,這里的GridView是指C#軟件開發(fā)中的GridView控件,需要的朋友可以參考下2015-12-12jq stop()和:is(:animated)的用法及區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨q stop()和:is(:animated)的用法及區(qū)別(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02基于jquery的禁用右鍵、文本選擇功能、復(fù)制按鍵的實現(xiàn)代碼
有時候因為某些原因,需要禁止用戶的右鍵、文本選擇功能、復(fù)制按鍵等操作,那么就可以參考下面的代碼2013-08-08