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

//1.hide():在HTML文檔中，為一個元素調用hide()方法會將該元素的display

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

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

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

//hide() 和 show() 可以接收兩個參數

//第一個 動畫的時間（可以是具體的數值，也可以是'fast' 和 'slow'，分別代表200和600毫秒的延時）

//第二個 動畫完成的回調函數

//以上兩個方法在不帶任何參數的情況下，作用是立即隱藏或顯示匹配的元素，不會有任何動畫，

//可以通過制定速度參數使元素動起來

//以上兩個方法會同時減少(增大)內容的高度、寬度和不透明度。

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

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

show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設置

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

如果讓show與hide成為一個動畫，那么默認執行動畫會改變元素的高度，高度，透明度

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

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

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

//這種寫法兩個方法會依次被執行，也可以單個使用額

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

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

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

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

? ? ? ? ? ? ? top:300,

? ? ? ? })

});

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

alert("親親的，我來了")

});

//這兩個參數可以根據需要決定是否添加

})

//兩個方法同時存在但是分開執行的方法，需要bol值判斷

// var bol = true;

//點擊文檔，切換box的出現和消失

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

if (bol) {

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

alert("隱藏了");

});

bol = false;

} else {

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

alert("出現了");

});

bol = true;

}

});

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

/*fadeIn(),fadeOut():只改變元素的透明度，fadeOut()會在指定的一段時間內

* 降低元素的不透明度，直到元素完全消失，函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果.所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。所有匹配的元素的高度和寬度不會發生變化。

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

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

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

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

* 三個參數,執行時間(時間可以填數值，也可以天單詞"slow"和"fast") 不透明度目標值 完成之后的回調函數

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

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

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

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

var bol = true;

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

// if (bol) {

// //不透明度變為0

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

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

// })

// } else {

// //不透明度變為設置的不透明度

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

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

// })

// }

// bol = !bol;

//三個參數

//執行時間 不透明度目標值 完成之后的回調函數

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

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

// })

//切換 out 和 in

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

})

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

.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式.下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none

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

如果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數會在每一個元素執行完動畫后都執行一次，而不是這組動畫整體才執行一次

/*slideDown(),slideUp():只會改變元素的高度。如果一個元素的display屬性為

* none，當調用slideDown()方法時，這個元素將由上至下延伸顯示。slideUp()方法

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

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

因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意

* slideToggle():通過高度變化來切換匹配元素的可見性，也可以給定事件和回調函數

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

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數

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

display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值.當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局

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

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

//slideDown() 從無到有，從上往下的出現

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

// $("#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動畫

語法：

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

.animate( properties, options )

.animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似，除了屬性范圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了。

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

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

.animate({

? ? ?left: 50,

? ? ?width: '50px'

? ? ?opacity: 'show',

? ? ?fontSize: "10em",

}, 500);

如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({

? ? ?left: '+=50px'

}, "slow");

// 在現有高度的基礎上增加100px

$aaron.animate({

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

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

});

除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏。

.animate({

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

});

$("#box").animate({

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

},3000)

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

easing動畫運動的算法

jQuery庫中默認調用 swing。如果需要其他的動畫算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個可以保證當前動畫確定完成后發會觸發

參數

duration?- 設置動畫執行的時間

easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數

step：規定每個動畫的每一步完成之后要執行的函數

progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念

complete：動畫完成回調

如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次