.show().hide().slideUp.slideDown.slideToggle.fadeIn.fadeOut.animate
如上函數(shù)如何使用躏啰？演示使用方式
-
.hide()
.hide([duration ] [,easing ] [,complete ])
用于隱藏元素，沒有參數(shù)的時候等同于直接設置display屬性
示例：
<style>
div {
background:#ccc;
width:100px;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
<script>
$('div').hide() // == $('.target').css('display', 'none')
</script>
image
當我們給
hide設置事件時：hide(2000)會有一個消失的過程效果：
image
-
.show()
.show( [duration ] [, easing ] [, complete ] )
用于顯示元素耙册，用法和hide類似
給顯示元素設置一個現(xiàn)實的時間
$('div').hide(2000) // 隱藏時間為2s
$('div').show(2000) //顯示時間為2s
效果:
image
-
.slideUp
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素给僵，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去详拙，當一個隱藏動畫后帝际，高度值達到0的時候，display 樣式屬性被設置為none饶辙，以確保該元素不再影響頁面布局蹲诀。
效果：（代碼基于hide）
$('div').slideUp()
image
-
.slideDown
用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫弃揽，這會導致頁面的下面部分滑下去脯爪，彌補了顯示的方式
效果：（代碼基于slideUp）
image
.slideToggle
用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫矿微，這會導致頁面中痕慢，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數(shù)據緩存中涌矢，所以display可以方便以后可以恢復到其初始值掖举。
如果一個元素的display屬性值為inline，然后是隱藏和顯示娜庇，這個元素將再次顯示inline塔次。當一個隱藏動畫后，高度值達到0的時候名秀，display 樣式屬性被設置為none俺叭，以確保該元素不再影響頁面布局。
效果：
連續(xù)調用兩次泰偿，和使用.slideUp()熄守、.slideDown效果相同
image
-
.fadeIn
.fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素，參數(shù)含義和上面相同
給div的css屬性設置display:none
$('div').fadeIn(2000)
效果:
image
-
.fadeOut
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
取消div的css中的display:none
效果：
image
上面幾個簡單的動畫不能滿足需求的時候耗跛，jquery提供了自定義動畫行為的方法
-
.animate
.animate( properties [, duration ] [, easing ] [, complete ] )
官方文檔
簡單示例：
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;">
要同時為圖像的不透明度裕照，左偏移和高度設置動畫：
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25, // 圖片透明度 漸變
left: "+=50", //向左移動距離 -- 原基礎上+50px;
height: "toggle" //
}, 5000, function() {
// Animation complete.
});
});
height屬性的目標值是'toggle'。由于之前圖像是可見的调塌，因此動畫會將高度縮小為0以隱藏它晋南。第二次點擊然后反轉此轉換
效果:
