控制元素show/hide/toggle

顯示元素 - show

$('#elementId').show();            // 立刻顯示
$('#elementId').show(2000);        // 動畫方式顯示,持續2000ms
$('#elementId').show('fast');      // 動畫方式顯示,持續200ms
$('#elementId').show('slow');      // 動畫方式顯示,持續600ms

隱藏元素 - hide

$('#elementId').hide();            // 立刻隱藏
$('#elementId').hide(2000);        // 動畫方式隱藏,持續2000ms
$('#elementId').hide('fast');      // 動畫方式隱藏,持續200ms
$('#elementId').hide('slow');      // 動畫方式隱藏,持續600ms

切換顯示/隱藏元素 - toggle

$('#elementId').toggle();          // 切換show/hide
$('#elementId').toggle(2000);      // 動畫方式切換show/hide,持續2000ms
$('#elementId').toggle('fast');    // 動畫方式切換show/hide,持續200ms
$('#elementId').toggle('slow');    // 動畫方式切換show/hide,持續600ms

檢查元素狀態

if($('#elementId').is(':visible')){
    // 狀態為顯示
}
else{
    // 狀態為隱藏
}

顯示狀態完成後呼叫 - callback

$('#elementId').show('fast',function(){
    // show complete
});
$('#elementId').hide('slow',function(){
    // hide complete
});
$('#elementId').toggle(2000,function(){
    // toggle complete
});

jQuery UI擴充顯示效果 - jquery.ui.effect

jquery 1.4.3新增 easing,官方寫的參數不大準確,以jquery UI為準.

需額外引用:

<script src="jquery.effects.core.js" type="text/javascript"></script>
<script src="jquery.effects.clip.js" type="text/javascript"></script>
<script src="jquery.effects.drop.js" type="text/javascript"></script>

如果要套用其他效果,則需另外再引用該效果之js.

$('#testDiv').toggle('clip',{}, 2000);  // 以clip效果切換show/hide
$('#testDiv').toggle('drop', {}, 2000); // 以drop效果切換show/hide

所有效果共有:

• blind
• bounce
• clip
• drop
• explode
• fold
• highlight
• puff
• pulsate
• scale
• shake
• size
• slide
• transfer

實際效果可以參考官方網站的DEMO