詳細介紹jQuery淡入淡出元素的方法

2021-06-24 12:00:41 字數 823 閱讀 2989

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

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

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

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

$('#button').click(function());//end click

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

$('p').fadeto('normal',.75);

jQuery 淡入淡出

通過 jquery,您可以實現元素的淡入淡出效果。jquery 擁有下面四種 fade 方法 fadein fadeout fadetoggle fadeto 下面一一介紹 jquery fadein 用於淡入已隱藏的元素。語法 selector fadein speed,callback 可選的 ...

jQuery 淡入淡出

通過 jquery,您可以實現元素的淡入淡出效果。jquery 擁有下面四種 fade 方法 fadein fadeout fadetoggle fadeto jquery fadein 用於淡入已隱藏的元素。語法 selector fadein speed,callback 可選的 speed 引...

JQuery淡入淡出效果

jquery 擁有下面四種 fade 方法實現淡入淡出效果 selector fadein speed,callback 可選的 speed 引數規定效果的時長。它可以取以下值 slow fast 或毫秒。可選的 callback 引數是 fading 完成後所執行的函式名稱。selector fa...