動畫基礎隱藏和顯示 (jQuery)

1jQuery中隱藏元素的hide方法

讓頁面上的元素不可見，通常能夠經過設置css的display爲none屬性。可是經過css直接修改是靜態的佈局，若是在代碼執行的時候，通常是經過js控制元素的style屬性，這裏jQuery提供了一個快捷的方法.hide()來達到這個效果

$elem.hide()

提供參數：

.hide( options )

當提供hide方法一個參數時，.hide()就會成爲一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做

快捷參數：

.hide("fast / slow")

這是一個動畫設置的快捷方式，'fast' 和 'slow' 分別表明200和600毫秒的延時，就是元素會執行200/600毫秒的動畫後再隱藏

注意：

jQuery在作hide操做的時候，是會保存自己的元素的原始屬性值，再以後經過對應的方法還原的時候仍是初始值。好比一個元素的display屬性值爲inline，那麼隱藏再顯示時，這個元素將再次顯示inline。一旦透明度 達到0，display樣式屬性將被設置爲none，這個元素將再也不在頁面中影響佈局

2jQuery中顯示元素的show方法

css中有display:none屬性，同時也有display:block，因此jQuery一樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段代碼：使用上一致，結果相反

$('elem').hide(3000).show(3000)

讓元素執行3秒的隱藏動畫，而後執行3秒的顯示動畫。

show與hide方法是很是經常使用的，可是通常不多會基於這2個屬性執行動畫，大多狀況下仍是直接操做元素的顯示與隱藏爲主

注意事項：

• show與hide方法是修改的display屬性，經過是visibility屬性佈局須要經過css方法單獨設置
• 若是使用!important在你的樣式中，好比display: none !important，若是你但願.show()方法正常工做，必須使用.css('display', 'block !important')重寫樣式
• 若是讓show與hide成爲一個動畫，那麼默認執行動畫會改變元素的高度，高度，透明度

3jQuery中顯示與隱藏切換toggle方法

show與hide是一對互斥的方法。須要對元素進行顯示隱藏的互斥切換，一般狀況是須要先判斷元素的display狀態，而後調用其對應的處理方法。好比顯示的元素，那麼就要調用hide，反之亦然。 對於這樣的操做行爲，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素

基本的操做：toggle();

這是最基本的操做，處理元素顯示或者隱藏，由於不帶參數，因此沒有動畫。經過改變CSS的display屬性，匹配的元素將被當即顯示或隱藏，沒有動畫。

• 若是元素是最初顯示，它會被隱藏
• 若是隱藏的，它會顯示出來

display屬性將被儲存而且須要的時候能夠恢復。若是一個元素的display值爲inline，而後是隱藏和顯示，這個元素將再次顯示inline

提供參數：.toggle( [duration ] [, complete ] )

一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程當中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

直接定位：.toggle(display)

直接提供一個參數，指定要改變的元素的最終效果

其實就是肯定是使用show仍是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

toggle方法就是show與hide的相互切換的一個快捷方法