8.2.1 fadeln()方法與fadeOut()方法
具有改變元素顯示與隱藏狀態(tài)的功能,僅改變元素的透明度餐塘。
8.2.2 fadeToggle()方法
fadeToggle()可以動態(tài)改變當(dāng)前元素的透明度，并切換當(dāng)前元素的可見狀態(tài)。即如果元素是可見的谒亦，則通過淡出效果切換為隱藏狀態(tài)；如果元素是隱藏的亭姥，則通過淡入效果切換為可見狀態(tài)。
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切換菜單
$("#menu li:gt(3):not(:last)").fadeToggle();
//更換底部箭頭方向
$(this).toggleClass("down");
});
});
</script>
8.2.3 fadeTo()方法
將透明度指定到某一個值，則需要調(diào)用fadeTo()方法污呼。
jQuery對象.fadeTo(duration,opacity,[fn]);
8.3 滑入與滑出動畫效果
8.3.1 slideDown() 方法與slideUp()方法
slideDown()方法是改變當(dāng)前元素的高度，由上到下滑入包竹，即高度向下增大燕酷；
slideUp()方法是由下到上滑出，即高度向上減小周瞎，都使其呈現(xiàn)出一種"滑動"的效果苗缩，直到顯示當(dāng)前元素。
jQuery對象.slideDown(duration声诸，[fn]);
8.2.3 slideToggle()方法
通過滑出切換隱藏狀態(tài)
jQuery對象.slideToggle(duration,[fn]);
<script type="text/javascript">
$(function(){
$(".secondLi").click(function){
$(".secondLi ul").slideToggle(500);
});
});
</script>
8.4 自定義動畫
8.4.1 簡單的動畫
animate()方法可以動態(tài)地改變當(dāng)前元素的各種css屬性酱讶。
css屬性：大小屬性（width，height）
邊框?qū)傩裕╞order-width）
外邊距屬性（margin）
內(nèi)邊距屬性（padding）
定位屬性（top彼乌，left浴麻，bottom，right）
字體屬性（font-size）
文本屬性（text-indent囤攀，letter-spacing软免，word-spacing）
背景屬性（background-position）
透明度（opacity）
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<img src="tmac.jpg"/>
<script type="text/javascript">
$(function(){
$("img):click(function(){
$(this).animate({"width":"280px","height":"280px"},"slow");
});
});
</script>
</body>
8.4.2 移動位置的動畫
利用動畫效果改變元素在頁面中的位置
<head>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
img{
position:absolute;
top:0px;
left:0px;
</style>
</head>
<body>
<img src="tmac.jpg"/>
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate(){
"left":"+=100px",
"top":"+=100px",
"opacity":"0.5"},3000);
}):
});
</script>
</body>
8.4.3 隊列中的動畫
“隊列”動畫，是在元素中執(zhí)行一個以上的多個動畫效果焚挠，即有多個animate()方法在元素中執(zhí)行膏萧，根據(jù)animate()方法執(zhí)行的先后順序，形成了動畫“隊列”蝌衔，產(chǎn)生“隊列”后榛泛，動畫的效果便按“隊列”的順序進(jìn)行展示。
<head>
<style type="text/css">
div{
border:1px solid #069;
width:50px;
height:50px;
font-size:13px;
padding:5px;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).animate({height:100},"slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
});
});
</script>
</head>
<body>
<div>隊列中的動畫</div>
</body>
8.5 停止動畫[stop()]
stop()方法能夠結(jié)束當(dāng)前的動畫噩斟，立即進(jìn)入到下一個動畫曹锨。
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function(){
$(".secondLi ul").stop().slideDown(1000);
},function(){
$(".secondLi ul").stop().slideUp(1000);
});
});
</script>
