欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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也做做看,能不能做出類似的效果。因為自己練手,就隨便拉兩張圖片:
復(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)文章

最新評論