用法
.show() => jQuery
.show() => jQuery
說明:顯示匹配的元素。
-
添加的版本:1.0
.show()
- 此簽名不接受任何參數。
-
添加的版本:1.0
.show( [duration ] [, complete ] )
-
duration(默認:
400
)確定動畫將運行多長時間的字符串或數字。 -
complete類型:Function ()動畫完成後調用的函數,每個匹配元素調用一次。
-
-
添加的版本:1.0
.show( options )
-
options類型:PlainObject要傳遞給方法的附加選項的映射。
-
duration(默認:
400
)確定動畫將運行多長時間的字符串或數字。 -
easing(默認:
swing
)類型:String一個字符串,指示用於轉換的緩動函數。 -
queue(默認:
true
)一個布爾值,指示是否將動畫放置在效果隊列中。如果為 false,動畫將立即開始。As of jQuery 1.7, queue 選項也可以接受一個字符串,在這種情況下,動畫被添加到該字符串表示的隊列中。當使用自定義隊列名稱時,動畫不會自動啟動;你必須調用.dequeue("queuename")
開始它。 -
specialEasing類型:PlainObject一個對象,包含一個或多個由 properties 參數定義的 CSS 屬性及其相應的緩動函數。(添加的版本:1.4)
-
step為每個動畫元素的每個動畫屬性調用的函數。此函數提供了修改 Tween 對象以在設置之前更改屬性值的機會。
-
progress在動畫的每個步驟之後要調用的函數,每個動畫元素僅調用一次,而與動畫屬性的數量無關。(添加的版本:1.8)
-
complete類型:Function ()元素上的動畫完成後調用的函數。
-
start當元素上的動畫開始時調用的函數。(添加的版本:1.8)
-
done當元素上的動畫完成(其 Promise 對象已解析)時要調用的函數。(添加的版本:1.8)
-
fail當元素上的動畫未能完成時調用的函數(其 Promise 對象被拒絕)。(添加的版本:1.8)
-
always當元素上的動畫完成或停止但未完成時調用的函數(其 Promise 對象被解析或拒絕)。(添加的版本:1.8)
-
-
-
添加的版本:1.4.3
.show( duration [, easing ] [, complete ] )
在沒有參數的情況下,.show()
方法是顯示元素的最簡單方法:
|
匹配的元素將立即顯示,沒有動畫。這大致相當於調用 .css( "display", "block" )
,除了 display
屬性恢複到最初的狀態。如果一個元素的 display
值為 inline
,則被隱藏並顯示,它將再次顯示為 inline
。
注意:如果在您的樣式中使用 !important,例如display: none !important
,.show()
不會覆蓋!important
.建議使用不同的類.addClass()
,.removeClass()
或者.toggleClass()
.另一種方法是使用.attr( "style", "display: block !important;" )
;不過要小心,因為它會覆蓋元素的樣式屬性。
當提供持續時間、普通對象或"complete" 函數時,.show()
成為動畫方法。 .show()
方法同時為匹配元素的寬度、高度和不透明度設置動畫。
持續時間以毫秒為單位;較高的值表示較慢的動畫,而不是較快的動畫。可以提供字符串'fast'
和'slow'
來分別表示200
和600
毫秒的持續時間。
從 jQuery 1.4.3 開始,可以使用命名緩動函數的可選字符串。緩動函數指定動畫在動畫中不同點的進展速度。 jQuery 庫中唯一的緩動實現是默認實現,稱為 swing
,以及以恒定速度進行的實現,稱為 linear
。使用 plug-ins 可以使用更多的緩動函數,尤其是 jQuery UI suite 。
如果提供,則在動畫完成後觸發回調。這對於將不同的動畫按順序串在一起很有用。回調未發送任何參數,但 this
設置為正在動畫的 DOM 元素。如果為多個元素設置了動畫,請務必注意,每個匹配的元素都會執行一次回調,而不是對整個動畫執行一次。
注意:此方法可能會導致性能問題,尤其是在許多元素上使用時。如果您遇到此類問題,請使用性能測試工具來確定是否是此方法導致的。此外,如果顯示值在不同的視口大小下不同,則此方法可能會導致響應式布局出現問題。
我們可以為任何元素設置動畫,例如簡單的圖像:
|




show()
效果圖示其他注意事項:
- 所有 jQuery 效果,包括
.show()
,都可以通過設置jQuery.fx.off = true
來全局關閉,這有效地將持續時間設置為 0。有關更多信息,請參閱 jQuery.fx.off 。
例子:
動畫所有隱藏段落以緩慢顯示,在 600 毫秒內完成動畫。
|
演示:
顯示第一個 div,然後按順序顯示下一個相鄰的兄弟 div,動畫時間為 200 毫秒。每個動畫在前一個兄弟 div 的動畫結束時開始。
|
演示:
用動畫顯示所有 span 和 input 元素。動畫完成後更改文本。
|
演示:
相關用法
- JQuery UI .show()用法及代碼示例
- JQuery .scroll()用法及代碼示例
- JQuery .slideDown()用法及代碼示例
- JQuery .stop()用法及代碼示例
- JQuery .submit()用法及代碼示例
- JQuery .size()用法及代碼示例
- JQuery .scrollLeft()用法及代碼示例
- JQuery .scrollTop()用法及代碼示例
- JQuery .serialize()用法及代碼示例
- JQuery UI .switchClass()用法及代碼示例
- JQuery .slideUp()用法及代碼示例
- JQuery .serializeArray()用法及代碼示例
- JQuery .slideToggle()用法及代碼示例
- JQuery .select()用法及代碼示例
- JQuery .slice()用法及代碼示例
- JQuery .siblings()用法及代碼示例
- JQuery .jquery用法及代碼示例
- JQuery .add()用法及代碼示例
- JQuery .contextmenu()用法及代碼示例
- JQuery .undelegate()用法及代碼示例
- JQuery .load()用法及代碼示例
- JQuery .contents()用法及代碼示例
- JQuery .empty()用法及代碼示例
- JQuery UI .labels()用法及代碼示例
- JQuery UI .addClass()用法及代碼示例
注:本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .show()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。