快捷導(dǎo)航

jQuery淡入淡出元素讓其效果更為生動(dòng)

更新時(shí)間：2014年09月01日 17:50:15 投稿：whsnow

把一個(gè)元素淡出或淡入可以達(dá)到更為生動(dòng)的效果，在任何一種情況下，都只是隨著時(shí)間來改變?cè)氐耐该鞫?/div>

為了達(dá)到更為生動(dòng)的效果，可以把一個(gè)元素淡出或淡入，在任何一種情況下，都只是隨著時(shí)間來改變?cè)氐耐该鞫?。jQuery提供了3個(gè)和淡入淡出相關(guān)的函數(shù)：

·fadeIn()使得一個(gè)隱藏的元素淡入視野。首先，元素占據(jù)的空間出現(xiàn)在頁面上(這可能意味著頁面上的其他元素要移走)；然后，元素逐漸地變得可見。如果元素在頁面上已經(jīng)可見，則這個(gè)函數(shù)沒有任何效果。如果沒有提供一個(gè)速度值，元素使用“常規(guī)”設(shè)置來淡入(400毫秒)。

·fadeOut()通過使得一個(gè)可視的元素像幽靈般地淡出視線來隱藏它。如果元素在頁面上已經(jīng)隱藏，這個(gè)函數(shù)沒有任何效果，這和fadeIn()函數(shù)一樣。如果沒有提供一個(gè)速度值，元素以400毫秒的速度淡出。

·fadeToggle()組合了淡入和淡出的效果。如果該元素當(dāng)前是隱藏的，它會(huì)淡入視線中；如果它當(dāng)前是可見的，該元素會(huì)淡出視線?？梢允褂眠@個(gè)函數(shù)讓一個(gè)提示框出現(xiàn)在頁面上或從頁面消失。例如，假設(shè)有一個(gè)按鈕，其上顯示單詞“instructions”。當(dāng)訪問者單擊該按鈕的時(shí)候，帶有說明的一個(gè)div將淡入視線；再次單擊該按鈕，將會(huì)使說明淡出視線。要讓該提示框每半秒鐘淡入或淡出一次，可以這樣編寫代碼：

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·fadeTo()的工作方式和其他兩個(gè)效果函數(shù)略有不同。它把圖像淡化到一定的透明度。例如，可以讓圖像淡化到半透明。和其他效果不同，必須提供一個(gè)速度值。此外，還提供0～1之間的一個(gè)值來表示元素的透明度。例如，要把所有的段落淡化到75%的透明度，可以這樣編寫代碼：

$('p').fadeTo('normal'，.75);

這個(gè)函數(shù)改變了一個(gè)元素的透明度，而不管這個(gè)元素是可見的還是不可見的。例如，假設(shè)要把當(dāng)前隱藏的一個(gè)元素淡化到50%的透明度。然后，如果使用 show()或fadeIn()顯示該元素，它會(huì)以50%的透明度顯示。同樣，如果隱藏一個(gè)半透明的元素，然后再顯示它，它的透明度設(shè)置還是會(huì)恢復(fù)。

您可能感興趣的文章: