- 1.顯示隱藏動(dòng)畫(huà)
- show()方法
（1）：
// 不帶參數(shù)，沒(méi)有動(dòng)畫(huà)
$("div").show();//作用等同于css(“display”, ”block”)
（2）：
//參數(shù)為數(shù)值，表示：執(zhí)行動(dòng)畫(huà)時(shí)長(zhǎng)
$("div").show(2000);//單位為毫秒（ms）
（3）：
//參數(shù)為字符串，是jQuery預(yù)設(shè)的值，共有三個(gè)，分別是：slow、normal、fast
$("div").show(“slow”); //slow：600ms、normal：400ms、fast：200ms
（4）：
// 參數(shù)一可以是數(shù)值類(lèi)型或者字符串類(lèi)型
// 參數(shù)二表示：動(dòng)畫(huà)執(zhí)行完后執(zhí)行的回調(diào)函數(shù)
$("div").show(2000, function() {});
hide()方法(同show一樣)
$("div").hide(); $("div").hide(1000); $("div").hide(“slow”); $("div").hide(1000, function(){});toggle()方法
$("div").toggle(speed,callback);
//參數(shù)一是動(dòng)畫(huà)的執(zhí)行時(shí)長(zhǎng)(可以是指定字符或毫秒)，參數(shù)二是動(dòng)畫(huà)執(zhí)行完成后的回調(diào)函數(shù)。
$("div").toggle(1000);
//切換元素的可見(jiàn)狀態(tài)。如果元素是可見(jiàn)的，切換為隱藏；如果元素是隱藏的，切換為可見(jiàn)的。
- 2.滑入滑出動(dòng)畫(huà)
- slideDown()方法
通過(guò)高度變化（向下增大）來(lái)動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來(lái)。
$("div").slideDown(speed,callback);
//作用：讓元素以下拉動(dòng)畫(huà)效果展示出來(lái)
- slideUp()方法
$("div").slideUp(speed,callback);
//作用：讓元素以上拉動(dòng)畫(huà)效果隱藏起來(lái)
- slideToggle()方法
$("div").slideToggle(speed,callback);
//切換滑入滑出效果
- 3.淡入淡出動(dòng)畫(huà)
- fadeIn()方法
通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。
$("div").fadeIn(speed, callback);
//作用：讓元素以淡淡的進(jìn)入視線的方式展示出來(lái)
- fadeOut()方法
$("div").fadeOut(1000,callback);
//作用：讓元素以漸漸消失的方式隱藏起來(lái)
- fadeToggle()方法
$("div").fadeToggle('fast',function(){});
//作用：通過(guò)改變不透明度，切換匹配元素的顯示或隱藏狀態(tài)
- fadeTo()方法
$("div").fadeTo(speed, opacity, callback) ;
// 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度
- 4.自定義動(dòng)畫(huà)
- 注意：所有能夠執(zhí)行動(dòng)畫(huà)的屬性必須只有一個(gè)數(shù)字類(lèi)型的值。
- 動(dòng)畫(huà)支持的屬性：
http://www.w3school.com.cn/jquery/effect_animate.asp - 5.停止動(dòng)畫(huà)
- stop()
作用：停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà) - 為什么要停止動(dòng)畫(huà)？
如果多個(gè)動(dòng)畫(huà)在同一元素上執(zhí)行，對(duì)這個(gè)元素來(lái)說(shuō)，后面的動(dòng)畫(huà)將被放到隊(duì)列中，從而形成動(dòng)畫(huà)隊(duì)列。（聯(lián)想：排隊(duì)進(jìn)站）
上一個(gè)動(dòng)畫(huà)執(zhí)行完成，下一個(gè)動(dòng)畫(huà)才能執(zhí)行，例如下拉菜單，這樣的效果有時(shí)不是我們想要的。 - 解釋:
當(dāng)調(diào)用stop()方法后，當(dāng)前動(dòng)畫(huà)停止于當(dāng)前樣式的值（不會(huì)到達(dá)目標(biāo)值），隊(duì)列中的下一個(gè)動(dòng)畫(huà)會(huì)立即開(kāi)始。如果參數(shù)clearQueue被設(shè)置為true，那么隊(duì)列中剩余的動(dòng)畫(huà)就被刪除了，永遠(yuǎn)不會(huì)再執(zhí)行。如果參數(shù)jumpToEnd被設(shè)置為true，那么當(dāng)前動(dòng)畫(huà)會(huì)停止，但是參與動(dòng)畫(huà)的每一個(gè)CSS屬性將被立即設(shè)置為它們的目標(biāo)值。比如：slideUp()方法，那么元素會(huì)立即隱藏掉。如果存在回調(diào)函數(shù)，回調(diào)函數(shù)也會(huì)立即執(zhí)行。
