首頁 > web前端 > js教程 > jQuery淡入淡出元素讓其效果更為生動_jquery

jQuery淡入淡出元素讓其效果更為生動_jquery

WBOY
發布: 2016-05-16 16:37:55
原創
1337 人瀏覽過

為了達到更為生動的效果,可以把一個元素淡出或淡入,在任何一種情況下,都只是隨著時間來改變元素的透明度。 jQuery提供了3個和淡入淡出相關的函數:

·fadeIn()使得一個隱藏的元素淡入視野。首先,元素佔據的空間出現在頁面上(這可能意味著頁面上的其他元素要移走);然後,元素逐漸地變得可見。如果元素在頁面上已經可見,則這個函數沒有任何效果。如果沒有提供一個速度值,元素使用「常規」設定來淡入(400毫秒)。

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

·fadeToggle()組合了淡入和淡出的效果。如果該元素目前是隱藏的,它會淡入視線中;如果它目前是可見 的,該元素會淡出視線。可以使用這個函數讓一個提示框出現在頁面上或從頁面消失。例如,假設有一個按鈕,其上顯示單字“instructions”。當訪 問者點擊該按鈕的時候,帶有說明的一個div將淡入視線;再次點擊該按鈕,將會使說明淡出視線。要讓該提示框每半秒鐘淡入或淡出一次,可以這樣寫程式碼:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
});//end click
登入後複製

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

$('p').fadeTo('normal',.75);
登入後複製

這個函數改變了一個元素的透明度,而不管這個元素是可見的還是不可見的。例如,假設要把目前隱藏的一個元素淡化到50%的透明度。然後,如果使用 show()或fadeIn()顯示該元素,它會以50%的透明度顯示。同樣,如果隱藏一個半透明的元素,然後再顯示它,它的透明度設定還是會恢復。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板