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);

Hello

點我看效果

.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();
});

Toggle

Hello

Good Bye

滑動 (Sliding)

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

.slideDown([duration] [, complete])

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

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

Hello

.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');

Hello

.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);

Hello

自己設定 (Custom)

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

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

// HTML
<p id="foo">Hello</p>
// jQuery
$('#foo').animate({ 
width: '70%',
opacity: 0.4,
marginLeft: '0.6in',
fontSize: '3em',
borderWidth: '10px'
}, 1500);

Hello

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

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