請試一下這個 jQuery 效果：

在 W3School，你可以找到你所需要的所有網站建設教程。

請點擊這里

實例

jQuery hide()

演示簡單的 jQuery hide() 函數。

jQuery hide()

另一個 hide() 演示。如何隱藏部分文本。

jQuery slideToggle()

演示簡單的 slide panel 效果。

jQuery fadeTo()

演示簡單的 jQuery fadeTo() 函數。

jQuery animate()

演示簡單的 jQuery animate() 函數。

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

jQuery 切換

jQuery toggle() 函數使用 show() 或 hide() 函數來切換 HTML 元素的可見狀態。

隱藏顯示的元素，顯示隱藏的元素。

語法：

$(selector).toggle(speed,callback)

speed參數可以設置這些值："slow", "fast", "normal" 或 毫秒。

實例

$("button").click(function(){ $("p").toggle(); }); 

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

slideUp() 實例

$(".flip").click(function(){ $(".panel").slideUp() }) 

slideToggle() 實例

$(".flip").click(function(){ $(".panel").slideToggle(); }); 

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參數的知識。

fadeTo() 實例

$("button").click(function(){ $("div").fadeTo("slow",0.25); }); 

fadeOut() 實例

$("button").click(function(){ $("div").fadeOut(4000); }); 

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" 或毫秒。

實例 1

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

實例 2

<script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); </script> 

HTML 元素默認是靜態定位，且無法移動。

如需使元素可以移動，請把 CSS 的 position 設置為 relative 或 absolute。

jQuery 效果 - 來自本頁

如需完整的參考手冊，請訪問我們的 jQuery Effect 參考手冊。