jQuery-4.動畫篇---動畫基礎隱藏和顯示
jQuery中隱藏元素的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，這個元素將不再在頁面中影響布局
<h2>hide</h2>
<div class="left">
<h4>測試一</h4>
<div id="a1">hide操作</div>
<button>直接hide</button>
//點擊buttom1 直接隱藏
$("button:first").click(function() {
$("#a1").hide()
});
</script>
<h4>測試一</h4>
<div id="a2">hide動畫操作</div>
<button>hide帶動畫</button>
<script type="text/javascript">
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert(‘執行3000ms動畫完畢‘)
}
})
});
</script>
jQuery中顯示元素的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成為一個動畫，那麽默認執行動畫會改變元素的高度，高度，透明度
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
</script>
jQuery中顯示與隱藏切換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的相互切換的一個快捷方法
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
<script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script>
jQuery-4.動畫篇---動畫基礎隱藏和顯示