JQ中給我們定義好的動畫效果的函數有很多,這一篇文章我們來說一說,JQ中指定元素淡入與淡出的效果,通過這個效果函數我們可以使前端的web頁面更好的呈現給訪客的面前

fadeIn()方法與fadeout()方法

fadeIn() 方法使用淡入效果來顯示被選元素,假如該元素是隱藏的。

語法

$(selector).fadeIn(speed,callback)

注:

speed:為效果的持續時間,單位為毫秒。它有三個默認的速度值,分別為:

slow:表示600毫秒

normal:表示400毫秒

fast:表示200毫秒

callback:表示fadeIn函數執行完后,要執行的函數

国产视频appfadeOut() 方法使用淡出效果來隱藏被選元素,假如該元素是隱藏的。

語法:

$(selector).fadeOut(speed,callback)

注:

speed:為效果的持續時間,單位為毫秒。它有三個默認的速度值,分別為:

slow:表示600毫秒

normal:表示400毫秒

国产视频appfast:表示200毫秒

callback:表示fadeIn函數執行完后,要執行的函數

舉例說明:

利用fadeIn()與fadeOut()寫一個淡入淡出的效果

HTML代碼

利用fadeIn()與fadeOut()寫一個淡入淡出的效果

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>隱藏</button>
<button id='button2'>顯示</button>
<!--飛鳥慕魚博客-->

JQ代碼

$("#button").click(function(){
    $("p").fadeOut("slow");
});
$("#button2").click(function(){
    $("p").fadeIn("slow");
});

結果:

我們分別點擊顯示和隱藏,P標簽會慢慢的消失或出現

jQ中的fadeTo()方法的使用與解釋

fadeTo() 方法將被選元素的不透明度逐漸地改變為指定的值。

語法

$(selector).fadeTo(speed,opacity,callback)

注:

speed:為效果的持續時間,單位為毫秒。它有三個默認的速度值,分別為:

slow:表示600毫秒

国产视频appnormal:表示400毫秒

国产视频appfast:表示200毫秒

opacity:表示淡入或淡出的透明度,必須是介于0.1到1.00之間的數字

callback:標示函數執行完后,要執行的函數

舉例說明一下

利用fadeTo()讓P標簽的透明度為0.4

HTML代碼

利用fadeTo()讓P標簽的透明度為0.4

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>測試</button>

JQ代碼

$("#button").click(function(){
    $("p").fadeTo("slow",0.4);
});

fadeToggle()方法解釋與使用

fadeToggle():方法可以在對指定元素進行淡入或淡出的切換

語法

$(selector).fadeToggle(speed,easing,callback)

注:

speed:為效果的持續時間,單位為毫秒。它有三個默認的速度值,分別為:

slow:表示600毫秒

normal:表示400毫秒

国产视频appfast:表示200毫秒

国产视频appeasing:規定在動畫的不同點上元素的速度。默認值為 "swing"

"swing" - 在開頭/結尾移動慢,在中間移動快

"linear" - 勻速移動

国产视频appcallback:標示函數執行完后,要執行的函數

舉例說明

利用fadeToggle()方法,使P標簽進行淡入或淡出效果

HTML代碼

利用fadeToggle()方法,使P標簽進行淡入或淡出效果

<p>飛鳥慕魚博客歡迎您!</p>
<button id='button'>測試</button>
<!--飛鳥慕魚博客-->

JQ代碼

$("#button").click(function(){
    $("p").fadeToggle("slow");
});