jQuery 效果 (Effects)

JavaScript 應用在客戶端網頁上最強悍的用途之一就是動態效果了,往往利用純 JavaScript 作一個效果你可能要寫好幾行的 Code,而 jQuery Effects 幫你把許多常會用到的特效包起來,現在你只需要寫個幾行 Code 來作事。(更多請看 jQuery UI)

基本的 (Basics)

.show([duration] [, complete])

.show() 顯示出隱藏的元素

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').show();

還可以加上動畫效果,且可在動畫結束後後執行一函式。duration 可以設定三種預定的速度 "slow", "normal", "fast",或設定動畫間隔的毫秒數 (ms).

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').show(5000);

.hide([duration] [, complete])

隱藏顯示的元素,相對於 .show() 函式,用法一樣。

// HTML
<p>Hello</p>
// jQuery
$('p').hide('fast');

Hello

.toggle([duration] [, complete])

輪流切換顯示/隱藏狀態。

// HTML
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
// jQuery
$('button').click(function() {
  $('p').toggle();
});

Hello

滑動 (Sliding)

相對於 .show(), .hide(), .slideDown(), .slideUp() 是以滑動的效果來顯示/隱藏元素。

.slideDown([duration] [, complete])

以滑下的特效來顯示元素。

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').slideDown(5000);

.slideUp([duration] [, complete])

以滑上的特效來隱藏元素。

// HTML
<p style="display: none">Hello</p>
// jQuery
// 隱藏後執行一個 callback function
$('p').slideUp(3000, function() {
    alert('隱藏完成')
});

Hello

.slideToggle([duration] [, complete])

輪流切換顯示/隱藏狀態。

淡入淡出 (Fading)

以淡入淡出的效果來顯示/隱藏元素。

.fadeIn() .fadeIn([duration] [, complete])

以淡入的特效來顯示元素。

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').fadeIn('slow');

.fadeOut([duration] [, complete])

以淡出的特效來隱藏元素。

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').fadeOut(3000);

Hello

.fadeTo(duration, opacity [, complete])

動態漸變調整元素透明度,且可在開關完畢後執行一函式。(寬高不變)

opacity 是不透明度值 0~1

HTML
<p style="display: none">Hello</p>
jQuery
$('p').fadeTo('slow', 0.33);

自己設定 (Custom)

.animate(properties [, duration] [, easing] [, complete])

.animate() 這個函式可以讓你自行定義動態效果,其參數分別為:

參數型別說明
propertiesObject一組包含最終 CSS 樣式的 {屬性:值}
durationString,Number三種預定的速度 (slow, normal, fast),或
動畫間隔的毫秒數值 (如一秒=1000)
easingString緩和方式,預設是 linear 線性,還有 swing 可選
completeFunction每個元素在完成動畫後要執行的函數
// HTML
<p id="#foo">Hello</p>
// jQuery
$('#foo').animate({ 
width: '70%',
opacity: 0.4,
marginLeft: '0.6in',
fontSize: '3em',
borderWidth: '10px'
}, 1500);

Hello

.animate() 只支援 "可數字化" 的屬性,如 height, width, left, top, opacity 等。

另外你也可以在屬性值前面指定 +=-= 來做相對運動。

$('#foo').animate({
  left: '+=100px'
}, 2000);