jQuery 隱藏和顯示
通過 hide() 和 show() 兩個函數，jQuery 支持對 HTML 元素的隱藏和顯示：
實例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() 和 show() 都可以設置兩個可選參數：speed 和 callback。
語法：
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 參數規定顯示或隱藏的速度。可以設置這些值："slow", "fast", "normal" 或毫秒。
callback 參數是在 hide 或 show 函數完成之后被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。
實例
$("button").click(function(){
$("p").hide(1000);
});
callback 參數是在該函數完成之后被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。jQuery 滑動函數 - slideDown, slideUp, slideToggle
jQuery 擁有以下滑動函數：
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 參數可以設置這些值："slow", "fast", "normal" 或毫秒。
callback 參數是在該函數完成之后被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。
slideDown() 實例
$(".flip").click(function(){
$(".panel").slideDown();
});
jQuery Fade 函數 - fadeIn(), fadeOut(), fadeTo()
jQuery 擁有以下 fade 函數：
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 參數可以設置這些值："slow", "fast", "normal" 或 毫秒。
fadeTo() 函數中的 opacity 參數規定減弱到給定的不透明度。
callback 參數是在該函數完成之后被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。jQuery 自定義動畫
jQuery 函數創建自定義動畫的語法：
$(selector).animate({params},[duration],[easing],[callback])
關鍵的參數是 params。它定義產生動畫的 CSS 屬性。可以同時設置多個此類屬性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二個參數是 duration。它定義用來應用到動畫的時間。它設置的值是："slow", "fast", "normal" 或毫秒。
實例
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
| 函數 | 描述 |
| $(selector).hide() | 隱藏被選元素 |
| $(selector).show() | 顯示被選元素 |
| $(selector).toggle() | 切換（在隱藏與顯示之間）被選元素 |
| $(selector).slideDown() | 向下滑動（顯示）被選元素 |
| $(selector).slideUp() | 向上滑動（隱藏）被選元素 |
| $(selector).slideToggle() | 對被選元素切換向上滑動和向下滑動 |
| $(selector).fadeIn() | 淡入被選元素 |
| $(selector).fadeOut() | 淡出被選元素 |
| $(selector).fadeTo() | 把被選元素淡出為給定的不透明度 |
| $(selector).animate() | 對被選元素執行自定義動畫 |
