jQuery 隱藏和顯示

標籤：http   ogg   text   anim   tor   com   ati   ast   down   

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 hide()

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

jQuery hide()

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

jQuery slideToggle()

示範簡單的 slide panel 效果。

jQuery fadeOut()

示範簡單的 jQuery fadeOut() 函數。

jQuery animate()

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

jQuery 效果

函數	描述
$(selector).hide()	隱藏被選元素
$(selector).show()	顯示被選元素
$(selector).toggle()	切換（在隱藏與顯示之間）被選元素
$(selector).slideDown()	向下滑動（顯示）被選元素
$(selector).slideUp()	向上滑動（隱藏）被選元素
$(selector).slideToggle()	對被選元素切換向上滑動和向下滑動
$(selector).fadeIn()	淡入被選元素
$(selector).fadeOut()	淡出被選元素
$(selector).fadeTo()	把被選元素淡出為給定的不透明度
$(selector).animate()	對被選元素執行自訂動畫

jQuery 隱藏和顯示