淺談jQuery之show(),hide(),toggle(),slideToggle()用法及區別

show(),hide(),toggle(),slideToggle()是jQuery中基本的動畫函數，下面看一下這四個看起來簡單，但互動性強大的函數吧

1.show()        顯示一個元素

show()函數的參數列表有四種形式，分別是

a.()   無參

b.(duration,complete) duration：期間[預設400ms] (實值型別可為String或Number){也可以使用“slow”,"fast","normal"}  complete：回呼函數（當動畫完成時要執行的函數）

c.(plainObject)         plainObject：對象直接量或new Object()建立的對象

d.(duration[,esing][,complete])   easing：要使用的擦除效果的名稱(需要外掛程式支援).預設jQuery提供"linear" 和 "swing". complete：嗯，你懂的

一個簡單的例子

html

<div id="clickme">Click here</div><img id="book" src="2.png" alt="" width="100" height="123" style="display:none" />

jQuery

$(document).ready(function(){$( "#clickme" ).click(function() {  $( "#book" ).show(400); })});

show(有參)：動態效果為從左至右，同時從上至下舒展，如下圖所示

2.hide()        隱藏一個元素

hide()函數的參數列表有同樣四種形式，參數樣式和show()是一樣一樣的，不再贅述了啦

一個簡單的例子

html

<div id="clickme" style="height:50px;width:98px;border:1px solid #000000;text-align:center">Click here</div><img id="book" src="2.png" alt="" width="100" height="123"/>

jQuery

$(document).ready(function(){$( "#clickme" ).click(function() {  $( "#book" ).hide(400);})});

hide(有參)：動態效果為從右至左，同時從下至上收縮

3.toggle()         顯示或隱藏一個元素

toggle或sildeToggle與show或hide的最大區別就是它倆在預設情況下，可以切換元素可見狀態，但show和hide改變元素可見狀態，無法切換。toggle的參數列表有四種，它與show()或hide()相比沒有無參列表，但增加了一個新的(showOrHide)，若參數為真,它就變成無參show()函數，否則，它就變成hide()函數

一個簡單的例子

html

<div id="clickme">Click here</div><img id="book" src="2.png" alt="" width="100" height="123"/>

jQuery

$(document).ready(function(){$( "#clickme" ).click(function() {  $( "#book" ).toggle(400, function() {// Animation complete.})})});

toggle：收縮時與show()效果一致，舒展時與hide()效果一致

4.slideToggle()         顯示或隱藏一個元素

把剛才toggle新加的參數列表去掉，剩下的三種便是sildeToggle的參數列表樣式

一個簡單的例子

html

<div id="clickme">Click here</div><img id="book" src="2.png" alt="" width="100" height="123" />

jQuery

$(document).ready(function(){$( "#clickme" ).click(function() {  $( "#book" ).slideToggle(400, function() {    // Animation complete.})})});

slideToggle：動態效果從下至上

官方API DOCUMENT

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

http://api.jquery.com/slideToggle/

最後吐槽一下W3School，內容還是不全，很多東西不詳細，以後還是去官網吧（XX局，有本事你連米國網站也給我封了，一個角落傳來的微弱聲音。。。。）