一、hide()、show()、toggle()

//1.hide():在HTML文檔中，為一個(gè)元素調(diào)用hide()方法會(huì)將該元素的display

//樣式改為none，代碼功能同css("display","none")。當(dāng)提供hide方法一個(gè)參數(shù)時(shí)，.hide()就會(huì)成為一個(gè)動(dòng)畫方法。.hide()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作。

jQuery在做hide操作的時(shí)候，是會(huì)保存本身的元素的原始屬性值，再之后通過(guò)對(duì)應(yīng)的方法還原的時(shí)候還是初始值。比如一個(gè)元素的display屬性值為inline，那么隱藏再顯示時(shí)，這個(gè)元素將再次顯示inline。一旦透明度達(dá)到0，display樣式屬性將被設(shè)置為none，這個(gè)元素將不再在頁(yè)面中影響布局

//2.show():將元素的display樣式改為先前的顯示狀態(tài)

//hide() 和 show() 可以接收兩個(gè)參數(shù)

//第一個(gè) 動(dòng)畫的時(shí)間（可以是具體的數(shù)值，也可以是'fast' 和 'slow'，分別代表200和600毫秒的延時(shí)）

//第二個(gè) 動(dòng)畫完成的回調(diào)函數(shù)

//以上兩個(gè)方法在不帶任何參數(shù)的情況下，作用是立即隱藏或顯示匹配的元素，不會(huì)有任何動(dòng)畫，

//可以通過(guò)制定速度參數(shù)使元素動(dòng)起來(lái)

//以上兩個(gè)方法會(huì)同時(shí)減少(增大)內(nèi)容的高度、寬度和不透明度。

$('elem').hide(3000).show(3000) ? 讓元素執(zhí)行3秒的隱藏動(dòng)畫，然后執(zhí)行3秒的顯示動(dòng)畫。

show與hide方法是非常常用的，但是一般很少會(huì)基于這2個(gè)屬性執(zhí)行動(dòng)畫，大多情況下還是直接操作元素的顯示與隱藏為主

show與hide方法是修改的display屬性，通過(guò)是visibility屬性布局需要通過(guò)css方法單獨(dú)設(shè)置

如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式

如果讓show與hide成為一個(gè)動(dòng)畫，那么默認(rèn)執(zhí)行動(dòng)畫會(huì)改變?cè)氐母叨?，高度，透明?br>

//3.toggle():切換元素的可見狀態(tài)，如果元素是可見的，則切換為隱藏，如果元素是隱藏的，則切換為可見的

show與hide是一對(duì)互斥的方法。需要對(duì)元素進(jìn)行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對(duì)應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。對(duì)于這樣的操作行為，jQuery提供了一個(gè)便捷方法toggle用于切換顯示或隱藏匹配元素

同樣的提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)發(fā)生顯示/隱藏的改變，在改變的過(guò)程中會(huì)把元素的高、寬、不透明度進(jìn)行一系列動(dòng)畫效果。這個(gè)元素其實(shí)就是show與hide的方法

//這種寫法兩個(gè)方法會(huì)依次被執(zhí)行，也可以單個(gè)使用額

$(document).on("click", function() {

$("#box").hide(2000,function(){

? ? ? ? ?$("#box").css({

? ? ? ? ? ? ? ?left:300,

? ? ? ? ? ? ? top:300,

? ? ? ? })

});

$("#box").show(2000,function(){

alert("親親的，我來(lái)了")

});

//這兩個(gè)參數(shù)可以根據(jù)需要決定是否添加

})

//兩個(gè)方法同時(shí)存在但是分開執(zhí)行的方法，需要bol值判斷

// var bol = true;

//點(diǎn)擊文檔，切換box的出現(xiàn)和消失

$(document).on("click", function() {

if (bol) {

$("#box").hide(500, function() {

alert("隱藏了");

});

bol = false;

} else {

$("#box").show(500, function() {

alert("出現(xiàn)了");

});

bol = true;

}

});

二、fadeIn()、fadeOut()、fadeTo()、fadeToggle()

/*fadeIn(),fadeOut():只改變?cè)氐耐该鞫?，fadeOut()會(huì)在指定的一段時(shí)間內(nèi)

* 降低元素的不透明度，直到元素完全消失，函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫效果.所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對(duì)作任何改變，元素是可見的，則將其隱藏。所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

* fadeIn()則相反，用于顯示所有匹配的元素，并帶有淡入的過(guò)渡動(dòng)畫效果

淡入的動(dòng)畫原理：操作元素的不透明度從0%逐漸增加到100%。

如果元素本身是可見的，不對(duì)其作任何改變。如果元素是隱藏的，則使其可見

* fadeTo()把不透明度以漸近的方式調(diào)整到指定的值(0-1之間)

* 三個(gè)參數(shù),執(zhí)行時(shí)間(時(shí)間可以填數(shù)值，也可以天單詞"slow"和"fast") 不透明度目標(biāo)值 完成之后的回調(diào)函數(shù)

必需的 duration參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

* fadeToggle()切換fadeIn(),fadeOut()，通過(guò)透明度來(lái)切換元素的可見性.

所謂"切換"，即如果元素當(dāng)前是可見的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400毫秒的延時(shí)

var bol = true;

$(document).on("click", function() {

// if (bol) {

// //不透明度變?yōu)?

// $("#box").fadeOut(1000, function() {

// console.log("消失了");

// })

// } else {

// //不透明度變?yōu)樵O(shè)置的不透明度

// $("#box").fadeIn(1000, function() {

// console.log("顯示了");

// })

// }

// bol = !bol;

//三個(gè)參數(shù)

//執(zhí)行時(shí)間 不透明度目標(biāo)值 完成之后的回調(diào)函數(shù)

// $("#box").fadeTo(1000, 0.2, function() {

// alert("變化完成");

// })

//切換 out 和 in

$("#box").fadeToggle(1000);

})

三、slideDown()、slideUp()、slideToggle()

.slideDown()：用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素

.slideDown()方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去，彌補(bǔ)了顯示的方式.下拉動(dòng)畫是從無(wú)到有，所以一開始元素是需要先隱藏起來(lái)的，可以設(shè)置display:none

持續(xù)時(shí)間（duration）是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時(shí)。

如果提供回調(diào)函數(shù)參數(shù)，callback會(huì)在動(dòng)畫完成的時(shí)候調(diào)用。將不同的動(dòng)畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是this會(huì)設(shè)成將要執(zhí)行動(dòng)畫的那個(gè)DOM元素，如果多個(gè)元素一起做動(dòng)畫效果，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫后都執(zhí)行一次，而不是這組動(dòng)畫整體才執(zhí)行一次

/*slideDown(),slideUp():只會(huì)改變?cè)氐母叨?。如果一個(gè)元素的display屬性為

* none，當(dāng)調(diào)用slideDown()方法時(shí)，這個(gè)元素將由上至下延伸顯示。slideUp()方法

* 正好相反，元素由下至上縮短隱藏

這個(gè)使用的含義就是：找到元素的高度，然后采用一個(gè)下滑動(dòng)畫讓元素一直滑到隱藏，當(dāng)高度為0的時(shí)候，也就是不可見的時(shí)，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁(yè)面布局了

因?yàn)閯?dòng)畫是異步的，所以要在動(dòng)畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意

* slideToggle():通過(guò)高度變化來(lái)切換匹配元素的可見性，也可以給定事件和回調(diào)函數(shù)

這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。

同樣的提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫，然后出發(fā)回調(diào)函數(shù)

同時(shí)也提供了時(shí)間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)

display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值.當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局

// $(document).on("click", function() {

// console.log("哈哈");

//slideDown() 從無(wú)到有，從上往下的出現(xiàn)

//slideUp()從有到無(wú)，從下往上的消失

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// });

// var bol = true;

// $(document).on("click", function() {

// if(bol) {

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// } else {

// $("#box").slideDown(1000, function() {

// alert("b");

// });

// }

// bol = !bol;

// })

$(document).on("click", function() {

$("#box").slideToggle();

});

四、animate動(dòng)畫

語(yǔ)法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )

.animate( properties, options )

.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫。2種語(yǔ)法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對(duì)。這組屬性和用于設(shè)置.css()方法的屬性鍵值對(duì)類似，除了屬性范圍做了更多限制。第二個(gè)參數(shù)開始可以單獨(dú)傳遞多個(gè)實(shí)參也可以合并成一個(gè)對(duì)象傳遞了。

properties：一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫的屬性必須是數(shù)字的，除非另有說(shuō)明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動(dòng)畫效果的。background-color很明顯不可以，因?yàn)閰?shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動(dòng)畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來(lái)設(shè)置，而非 CSS 名稱（比如 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說(shuō)明。單位em 和 %需要指定使用。

.animate({

? ? ?left: 50,

? ? ?width: '50px'

? ? ?opacity: 'show',

? ? ?fontSize: "10em",

}, 500);

如果提供一個(gè)以+= 或 -=開始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來(lái)計(jì)算的

.animate({

? ? ?left: '+=50px'

}, "slow");

// 在現(xiàn)有高度的基礎(chǔ)上增加100px

$aaron.animate({

? ? ?width? : "+=100px",

? ? ?height : "+=100px",

});

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫用來(lái)控制元素的顯示或隱藏。

.animate({

? ? ?width: "toggle",//改變寬，從寬上面改變

});

$("#box").animate({

? ? height:"toggle",//改變高，從高上面改變

},3000)

動(dòng)畫執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。

easing動(dòng)畫運(yùn)動(dòng)的算法

jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫算法，請(qǐng)查找相關(guān)的插件

complete回調(diào)

動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(fā)

參數(shù)

duration?- 設(shè)置動(dòng)畫執(zhí)行的時(shí)間

easing - 規(guī)定要使用的 easing 函數(shù)，過(guò)渡使用哪種緩動(dòng)函數(shù)

step：規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)

progress：每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念

complete：動(dòng)畫完成回調(diào)

如果多個(gè)元素執(zhí)行動(dòng)畫，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫執(zhí)行一次