show() and hide()
1. show()和hide()
show()方法和hide()方法是jQuery中最基本的動畫方法，在HTML文檔里闹司，為一個元素調(diào)用hide()方法途凫，會將該元素的display樣式改為none瞧栗。
$("element").hide();
這段代碼的功能與css()方法設(shè)置display屬性效果相同。
$("element").css("display","none");
當(dāng)把元素隱藏后酱床，可以使用show()方法將元素的display樣式設(shè)置為先前的顯示狀態(tài)（"block"或"inline"或其他值）屉栓。
$("element").show();
<body>
<div id="panel">
<h5 class="head">新聞標(biāo)題</h5>
<div class="content">新聞內(nèi)容.............................................
.....................................................................
......................................JavaScript庫舷蒲。
</div>
</div>
</body>
<script>
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().hide();
},function() {
$(this).next().show();
})
})
</script>
注意hide()在將"內(nèi)容"的display屬性值設(shè)置未來"none"之前耸袜，會記住原先的display屬性值友多。當(dāng)調(diào)用show()方法時，就會根據(jù)方法記住的display屬性值來顯示元素堤框。
在本例中域滥，”內(nèi)容“的display屬性值是block，當(dāng)點單擊”標(biāo)題“鏈接執(zhí)行hide()方法的時候蜈抓，hide()會做兩步動作启绰，首先會記住”內(nèi)容“的display屬性值block，然后把display屬性值設(shè)置為”none“沟使。
2. show()方法和hide()方法讓元素動起來
show和hide方法在不帶任何參數(shù)的情況下委可，是沒有動畫的，如果希望在調(diào)用show方法時，元素慢慢顯示出來着倾，可以為show()方法指定一個速度參數(shù)拾酝，例如，指定一個速度關(guān)鍵字”slow“：
$("element").show("slow");
元素將在600ms內(nèi)慢慢顯示出來卡者，其他的速度關(guān)鍵字 還有normal（400ms）蒿囤，fast（200ms）。
$(function() {
$("#panel h5.head").click(function() {
$(".content").toggle("slow");
})
})
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().hide(600);
} else {
$(this).next().show(200);
}
})
})
})
fadeIn() and fadeOut()
與show()方法不相同的是崇决，fadeIn()方法和fadeOut()方法只改變元素的不透明度材诽。fadeOut方法會在指定的一段時間內(nèi)降低元素的不透明度，直到元素完全小時（display：none）恒傻。fadeIn()方法則相反脸侥。
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().fadeOut();
} else {
$(this).next().fadeIn();
}
})
})
})
當(dāng)?shù)谝淮螁螕簟睒?biāo)題“鏈接后，”內(nèi)容“慢慢地消失了（淡出）盈厘，當(dāng)再次單擊”標(biāo)題“鏈接后湿痢，”內(nèi)容“又慢慢地顯示了（淡入）。
slideUp() and slideDown()
slideUp()方法和slideDown()方法只會改變元素的高度扑庞。如果一個元素的display屬性值為none譬重，當(dāng)調(diào)用slideDown()方法時，這個元素將由上至下延伸顯示罐氨。slideUp()方法正好相反臀规，元素將由下至上縮短隱藏滨嘱。使用slideUp()方法和slideDown()再次對”內(nèi)容“的顯示和隱藏方式進行改變腋舌。
$(function () {
$(function () {
$("#panel h5.head").click(function () {
if ($(this).next().is(":visible")) {
$(this).next().slideUp();
} else {
$(this).next().slideDown();
}
})
})
})
jQuery中任何動畫效果，都可以指定3種速度參數(shù)的榛，即slow租悄，normal谨究，fast，時間長度分別為0.6秒泣棋，0.4秒胶哲，0.2秒。當(dāng)使用速度關(guān)鍵字需要加引號潭辈，如果需要用數(shù)學(xué)作為時間參數(shù)就不需要加引號鸯屿。
自定義動畫方法animate()
很多情況下，需要對動畫有更多控制把敢，需要采用一些高級的自定義動畫來解決這些問題寄摆，jQuery中，可以使用animate()方法來自定義動畫修赞。
animate(params , speed , callback);
- params：一個包含樣式屬性及值的映射婶恼。
- speed：速度參數(shù)，可選。
- callback：在動畫完成時執(zhí)行的函數(shù)勾邦，可選联逻。
1. 自定義簡單動畫
前面的幾個例子，從不同的方面使動畫動了起來检痰，animate()方法也可以使元素動起來包归，而且animate()方法更具有靈活性。通過animate()方法铅歼，能夠?qū)崿F(xiàn)更加精致新穎的動畫效果公壤。
現(xiàn)在有一個空白HTML文檔，里面有一個div元素椎椰，單擊div元素厦幅，能在頁面上橫向飄動。
<style>
#panel {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<body>
<div id="panel"></div>
</body>
為了使元素動起來慨飘，要更改元素的left樣式屬性确憨。需要注意的是在使用animate()方法之前，為了能影響該元素的top瓤的，left休弃，bottom，right樣式屬性圈膏，必須先把元素的position樣式設(shè)置為relative或者absolute塔猾。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px"},3000);
})
});
在本段代碼中，首先為id為panel的元素創(chuàng)建一個單擊事件稽坤，然后對元素加入animate()方法丈甸，使元素在3秒內(nèi)，向右移動500像素尿褪。
2. 累加睦擂、累減動畫
在之前代碼中，設(shè)置了{(lán)left:"500px"}作為動畫參數(shù)杖玲。如果在500px之前加上"+="或者"-="符號即表示在 當(dāng)前位置累加或者累減顿仇。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"+=500px"},3000);
})
});
3. 多重動畫
1.同時執(zhí)行多個動畫
上面例子中，通用控制屬性left的值實現(xiàn)了動畫的效果天揖，這是一個很單一的動畫夺欲，如果需要同時執(zhí)行多個動畫跪帝，例如在元素向右滑動的同時今膊，放大元素的高度：
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px"},3000);
})
});
運行后，div元素在向右滑動同時伞剑，也會放大高度斑唬。
- 按順序執(zhí)行多個動畫
上例中，兩個動畫效果是同時發(fā)生的，如果想要按順序執(zhí)行動畫恕刘，例如讓div元素先向右移動缤谎，然后在放大高度，只需吧代碼拆開褐着，然后按順序?qū)懢涂梢粤恕?/li>
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
因為都是對同一個jQuery對象繼續(xù)操作坷澡，所以也可以改為鏈?zhǔn)綄懛ā?/p>
$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
像這樣，動畫效果的執(zhí)行具有先后順序含蓉，稱為動畫隊列频敛。
4. 綜合動畫
需求：單擊div元素后，讓它向右移動的同時增大它的高度馅扣，并將它的不透明度從0.5變換到1斟赚，然后在讓它從上倒下移動，同時寬度變大差油，完成這些效果后拗军，淡出隱藏。
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000);
$(this).animate({top:"200px",width:"200px"},3000);
$(this).fadeOut("slow");
})
});
動畫回調(diào)函數(shù)
在上例中蓄喇，如果想在最后一步切換元素的CSS樣式发侵，而不是隱藏元素：
css("border","5px solid blue");
如果只是按照常規(guī)方式，將fadeOut("slow")改為css("border","5px solid blue")妆偏。
這樣并不能得到預(yù)期效果器紧。預(yù)期的效果是在動畫的最后一步改變元素的樣式，而實際的效果是楼眷，剛開始執(zhí)行動畫的時候铲汪，css()方法就被執(zhí)行了。
出現(xiàn)這個問題的原因是css()方法并不會加入到動畫隊列中罐柳，而是立即執(zhí)行掌腰。可以使用回調(diào)函數(shù)(callback)非動畫方法實現(xiàn)排隊张吉，只要把css()方法寫在最后一個動畫的回調(diào)函數(shù)里即可齿梁。
$("#panel").click(function() {
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000);
$(this).animate({top:"200px",width:"200px"},3000,function() {
$(this).css("border","5px solid blue");
});
})
這樣依賴，css()方法就加入動畫隊列中了肮蛹。
注意：callback回調(diào)函數(shù)適用于jQuery所有的動畫效果方法勺择，例如slideDown()方法的回調(diào)函數(shù)：
$("#element").slideDown("normal",function() { // ... })這段代碼表示，id=element的元素將在0.4秒內(nèi)向下完全展開伦忠，當(dāng)動畫完成后省核，執(zhí)行回調(diào)函數(shù)體內(nèi)的代碼。
停止動畫和判斷是否處于動畫狀態(tài)昆码。
1. 停止元素的動畫
很多時候需要停止匹配元素正在進行的動畫气忠，例如上例的動畫邻储，如果需要在某處停止動畫，需要使用stop()方法旧噪。
sopt([clearQueue],[gotoEnd]);
- clearQueue：布爾值吨娜，代表是否要清空未執(zhí)行完的動畫隊列
- gotoEnd：代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)。
如果直接使用stop方法淘钟，則會立即停止當(dāng)前正在進行的動畫宦赠，如果接下來還有動畫等待繼續(xù)進行，則以當(dāng)前狀態(tài)開始接下來的動畫米母。
經(jīng)常遇到的一種情況袱瓮，為一個元素綁定hover事件之后，用戶把光標(biāo)移入元素時觸發(fā)動畫效果爱咬，而當(dāng)這個動畫還沒結(jié)束時尺借，用戶光標(biāo)就移出元素了，那么光標(biāo)移出的動畫效果將會被放進隊列中精拟，等待光標(biāo)移入的動畫結(jié)束后再執(zhí)行燎斩。
$(function() {
$("#panel").mouseover(function() {
$(this).animate({left:"500px"},3000);
})
$("#panel").mouseout(function() {
$(this).animate({left:"0px"},3000);
})
});
如上例子，鼠標(biāo)移入會觸發(fā)一段向右移動動畫蜂绎，假設(shè)移入div元素后不動栅表，那么自然而然會觸發(fā)第二段動畫，但是第二段動畫必須在第一段動畫執(zhí)行結(jié)束后在執(zhí)行师枣。
此時怪瓶，只要在光標(biāo)的移入、移出動畫之前加入stop方法践美，就可以解決問題洗贰。stop()方法會結(jié)束當(dāng)前正在進行的動畫，并立即執(zhí)行隊列中的下一個動畫陨倡。
$(function() {
$("#panel").mouseover(function() {
$(this).stop().animate({left:"500px"},1500);
})
$("#panel").mouseout(function() {
$(this).stop().animate({left:"0px"},1500);
})
});
如果遇到組合動畫敛滋，例如：
$("#panel").hover(function() {
$(this).stop()
.animate({height:"150px"},200) // 如果此時發(fā)生了光標(biāo)移出事件
// 將執(zhí)行下面的動畫
// 而非光標(biāo)移出事件中的動畫
.animate({width:"300px"},300);
},function() {
$(this).stop()
.animate({height:"22"},200)
.animate({width:"60"},300);
})
此時只用一個不帶參數(shù)的stop()方法就顯得力不從心了，因為stop()只會停止正在進行的動畫兴革，假設(shè)現(xiàn)在光標(biāo)移入绎晃，動畫正執(zhí)行第一階段（height：150），此時我們觸發(fā)光標(biāo)移出事件杂曲，只會停止當(dāng)前的動畫庶艾，并繼續(xù)進行下面的animate（width:300），而我們的需求是直接跳過第一階段的動畫擎勘，這顯然不是預(yù)期的結(jié)果咱揍。
這種情況下stop()方法的第一個參數(shù)發(fā)揮作用了，可以把第1個參數(shù)（clearQueue）設(shè)置為true货抄，此時程序會把當(dāng)前元素接下來尚未執(zhí)行完的動畫隊列都清空述召。
$("#panel").hover(function() {
$(this).stop(true)
.animate({height:"150px"},200) // 如果此時發(fā)生了光標(biāo)移出事件
// 將跳過后面的動畫隊列
.animate({width:"300px"},300);
},function() { // 而開始執(zhí)行這里的動畫
$(this).stop(true)
.animate({height:"22"},200)
.animate({width:"60"},300);
})
第2個參數(shù)（gotoEnd）可以用于讓正在執(zhí)行的動畫直接到達(dá)結(jié)束時刻的狀態(tài)朱转，通常用于后一個動畫需要前一個動畫的末狀態(tài)的情況蟹地，可以通過stop(false,true)來讓當(dāng)前動畫到達(dá)末狀態(tài)积暖。
當(dāng)然也可以兩者結(jié)合起來使用stop(true,true)，即停止當(dāng)前動畫怪与，并直接到達(dá)當(dāng)前動畫的末狀態(tài)夺刑。并清空動畫隊列。
注意分别，jQuery只能設(shè)置正在執(zhí)行的動畫的最終狀態(tài)遍愿，而沒有提供直接到達(dá)未執(zhí)行動畫隊列最終狀態(tài)的方法。例如：
$("div.content")
.animate({width:"300"},200)
.animate({height:"150"},300)
.animate({opacity:"0.2"},2000);
**無論怎么設(shè)置stop()方法耘斩，均無法改變width或者h(yuǎn)eight時沼填，將此div元素的末狀態(tài)變成300x150的大小，并且設(shè)置透明度0.2括授。
說白了坞笙，我們只能加快（直接到達(dá)）這個過程，或者說取消過程荚虚，直接看到結(jié)果薛夜。但是結(jié)果我們不能改變，這由樣式?jīng)Q定了版述。
2. 判斷元素是否處于動畫狀態(tài)
在使用animate()方法時候梯澜，要避免動畫積累而導(dǎo)致的動畫與用戶的行為不一致。當(dāng)用戶快速在某個元素上執(zhí)行animate動畫時渴析，就會出現(xiàn)動畫積累晚伙。解決方法是判斷元素是否處于動畫狀態(tài)，如果元素不出于動畫狀態(tài)俭茧，再為元素添加新的動畫撬腾，否則不添加。
if (! $("element").is(":animated")) { // 判斷元素是否正處于動畫狀態(tài)
// 如果當(dāng)前沒有進行動畫恢恼，則添加新動畫
}
這個判斷方法在animate()動畫中經(jīng)常用到民傻，需要注意。
3. 延遲動畫
在動畫執(zhí)行過程中场斑，如果想對動畫進行延遲操作漓踢，那么可以使用delay()方法。
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(1000)
.animte({top:"200px",width:"200px"},3000)
.delay(2000)
.fadeOut("slow");
delay()方法允許我們將隊列中的函數(shù)延遲執(zhí)行漏隐。它既可以推遲動畫隊列中函數(shù)的執(zhí)行喧半，也可以用于自定義隊列。
其他動畫方法
jQuery中還有4個專門用于交互的動畫方法青责。
-
toggle( speed , [callback] ) -
slideToggle(speed , [easing] , [callback]) -
fadeTo(speed , opacity , [callback]) -
fadeToggle(speed , [easing] , [callback])
toggle()
toggle()方法用于切換元素的可見狀態(tài)挺据。如果元素是可見的取具，則切換為隱藏的；如果元素是隱藏的扁耐，切換為可見的暇检。
$("#panel h5.head").click(function() {
$(this).next().toggle();
})
當(dāng)單擊”標(biāo)題“鏈接后，”內(nèi)容“會在可見和隱藏兩種狀態(tài)之間切換婉称。
相當(dāng)于：
$("#panel h5.head").toggle(function() {
$(this).next().hide();
},function() {
$(this).next().show();
})
slideToggle()
slideToggle()方法通過高度變化來切換匹配元素可見性块仆。這個動畫效果只調(diào)整元素的高度。
$("#panel h5.head").click(function() {
$(this).next().slideToggle();
})
單擊”標(biāo)題“后王暗，”內(nèi)容“會在可見和隱藏兩種狀態(tài)之間切換悔据，不過是通過改變元素的高度來實現(xiàn)的。
相當(dāng)于：
$("#panel h5.head").toggle(function() {
$(this).next().slideUp();
},function() {
$(this).next().slideDown();
})
fadeTo()
fadeTo()方法可以把元素的不透明度以漸進方式調(diào)整到指定的值俗壹。這個動畫只調(diào)整元素的不透明度科汗，即匹配的元素的高度和寬度不會發(fā)生變化。
$("#panel h5.head").click(function() {
$(this).next().fadeTo(600,0.2);
})
當(dāng)“標(biāo)題”被單擊后绷雏，“內(nèi)容”會漸漸地調(diào)整到指定的不透明度（20%）头滔。
fadeToggle()
fadeToggle()方法通過不透明度變化來切換匹配元素的可見性。這個動畫效果只調(diào)整元素的不透明度之众。
$("#panel h5.head").click(function() {
$(this).next().fadeToggle();
})
相當(dāng)于：
$("panel h5.head").toggle(function() {
$(this).next().fadeOut();
},function() {
$(this).next().fadeIn();
})
總結(jié)：
特別注意animate()方法拙毫，它可以替代其他所有動畫方法。
- 代替show()
$("p").animate({height:"show",width:"show",opacity:"show"},400);
// 等價于
$("p").show(400);
- 代替fadeIn()
$("p").animate({opacity:"show"},400);
// 等價于
$("p").fadeIn(400);
- 代替slideDown()
$("p").animate({height:"show"},400);
// 等價于
$("p").slideDown(400);
- 代替fadeTo()
$("p").animate({opacity:"0.6"},400);
// 等價于
$("p").fadeTo(400,0.6);
動畫隊列
-
一組元素上的動畫效果
- 當(dāng)在一個animate()方法中應(yīng)用多個屬性時棺禾，動畫是同時發(fā)生的缀蹄。
- 當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用動畫方法時，動畫是按照順序發(fā)生的（除非queue選項值為false）膘婶。
-
多組元素上的動畫效果
- 默認(rèn)情況下缺前，動畫都是同時發(fā)生的。
- 當(dāng)以回調(diào)的形式應(yīng)用動畫方式時（包括動畫的回調(diào)函數(shù)和queue()方法的回調(diào)函數(shù)）悬襟，動畫是按照回調(diào)順發(fā)生的衅码。
