一并蝗、hide()蝠猬、show()切蟋、toggle()
//1.hide():在HTML文檔中，為一個元素調(diào)用hide()方法會將該元素的display
//樣式改為none榆芦，代碼功能同css("display","none")柄粹。當(dāng)提供hide方法一個參數(shù)時，.hide()就會成為一個動畫方法匆绣。.hide()方法將會匹配元素的寬度驻右，高度，以及不透明度崎淳，同時進(jìn)行動畫操作堪夭。
jQuery在做hide操作的時候，是會保存本身的元素的原始屬性值拣凹，再之后通過對應(yīng)的方法還原的時候還是初始值茵瘾。比如一個元素的display屬性值為inline，那么隱藏再顯示時咐鹤，這個元素將再次顯示inline拗秘。一旦透明度達(dá)到0，display樣式屬性將被設(shè)置為none祈惶，這個元素將不再在頁面中影響布局
//2.show():將元素的display樣式改為先前的顯示狀態(tài)
//hide() 和 show() 可以接收兩個參數(shù)
//第一個 動畫的時間（可以是具體的數(shù)值雕旨，也可以是'fast' 和 'slow'，分別代表200和600毫秒的延時）
//第二個 動畫完成的回調(diào)函數(shù)
//以上兩個方法在不帶任何參數(shù)的情況下捧请，作用是立即隱藏或顯示匹配的元素凡涩，不會有任何動畫，
//可以通過制定速度參數(shù)使元素動起來
//以上兩個方法會同時減少(增大)內(nèi)容的高度疹蛉、寬度和不透明度活箕。
$('elem').hide(3000).show(3000) ? 讓元素執(zhí)行3秒的隱藏動畫，然后執(zhí)行3秒的顯示動畫可款。
show與hide方法是非常常用的育韩，但是一般很少會基于這2個屬性執(zhí)行動畫克蚂，大多情況下還是直接操作元素的顯示與隱藏為主
show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設(shè)置
如果使用!important在你的樣式中筋讨，比如display: none !important埃叭，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
如果讓show與hide成為一個動畫，那么默認(rèn)執(zhí)行動畫會改變元素的高度，高度唐含，透明度
//3.toggle():切換元素的可見狀態(tài)伸刃，如果元素是可見的，則切換為隱藏，如果元素是隱藏的，則切換為可見的
show與hide是一對互斥的方法。需要對元素進(jìn)行顯示隱藏的互斥切換莺奔，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對應(yīng)的處理方法变泄。比如顯示的元素令哟，那么就要調(diào)用hide，反之亦然妨蛹。對于這樣的操作行為屏富，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素
同樣的提供了時間、還有動畫結(jié)束的回調(diào)蛙卤。在參數(shù)對應(yīng)的時間內(nèi)狠半，元素會發(fā)生顯示/隱藏的改變，在改變的過程中會把元素的高颤难、寬神年、不透明度進(jìn)行一系列動畫效果。這個元素其實就是show與hide的方法
//這種寫法兩個方法會依次被執(zhí)行行嗤，也可以單個使用額
$(document).on("click", function() {
$("#box").hide(2000,function(){
? ? ? ? ?$("#box").css({
? ? ? ? ? ? ? ?left:300,
? ? ? ? ? ? ? top:300,
? ? ? ? })
});
$("#box").show(2000,function(){
alert("親親的已日，我來了")
});
//這兩個參數(shù)可以根據(jù)需要決定是否添加
})
//兩個方法同時存在但是分開執(zhí)行的方法，需要bol值判斷
// var bol = true;
//點擊文檔栅屏，切換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():只改變元素的透明度，fadeOut()會在指定的一段時間內(nèi)
* 降低元素的不透明度哥纫，直到元素完全消失霉旗，函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果.所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對作任何改變厌秒，元素是可見的读拆，則將其隱藏。所有匹配的元素的高度和寬度不會發(fā)生變化简僧。
* fadeIn()則相反，用于顯示所有匹配的元素雕欺，并帶有淡入的過渡動畫效果
淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%岛马。
如果元素本身是可見的，不對其作任何改變屠列。如果元素是隱藏的啦逆，則使其可見
* fadeTo()把不透明度以漸近的方式調(diào)整到指定的值(0-1之間)
* 三個參數(shù),執(zhí)行時間(時間可以填數(shù)值，也可以天單詞"slow"和"fast") 不透明度目標(biāo)值 完成之后的回調(diào)函數(shù)
必需的 duration參數(shù)規(guī)定效果的時長笛洛。它可以取以下值："slow"夏志、"fast" 或毫秒。fadeTo() 方法中必需的 opacity參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）苛让」得铮可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
* fadeToggle()切換fadeIn(),fadeOut()狱杰，通過透明度來切換元素的可見性.
所謂"切換"瘦材，即如果元素當(dāng)前是可見的，則將其隱藏(淡出)仿畸；如果元素當(dāng)前是隱藏的食棕，則使其顯示(淡入)。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時错沽。如果提供任何其他字符串簿晓，或者這個duration參數(shù)被省略，那么默認(rèn)使用400毫秒的延時
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;
//三個參數(shù)
//執(zhí)行時間 不透明度目標(biāo)值 完成之后的回調(diào)函數(shù)
// $("#box").fadeTo(1000, 0.2, function() {
// alert("變化完成");
// })
//切換 out 和 in
$("#box").fadeToggle(1000);
})
三千埃、slideDown()憔儿、slideUp()、slideToggle()
.slideDown()：用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫放可，這會導(dǎo)致頁面的下面部分滑下去皿曲，彌補(bǔ)了顯示的方式.下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的吴侦，可以設(shè)置display:none
持續(xù)時間（duration）是以毫秒為單位的屋休，數(shù)值越大，動畫越慢备韧，不是越快劫樟。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略叠艳，那么默認(rèn)使用400 毫秒的延時奶陈。
如果提供回調(diào)函數(shù)參數(shù)，callback會在動畫完成的時候調(diào)用附较。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的吃粒。這個回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是this會設(shè)成將要執(zhí)行動畫的那個DOM元素拒课，如果多個元素一起做動畫效果徐勃，那么要非常注意，回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次早像，而不是這組動畫整體才執(zhí)行一次
/*slideDown(),slideUp():只會改變元素的高度僻肖。如果一個元素的display屬性為
* none，當(dāng)調(diào)用slideDown()方法時卢鹦，這個元素將由上至下延伸顯示臀脏。slideUp()方法
* 正好相反，元素由下至上縮短隱藏
這個使用的含義就是：找到元素的高度冀自，然后采用一個下滑動畫讓元素一直滑到隱藏揉稚，當(dāng)高度為0的時候，也就是不可見的時熬粗，修改元素display 樣式屬性被設(shè)置為none窃植。這樣就能確保這個元素不會影響頁面布局了
因為動畫是異步的，所以要在動畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面荐糜，這里要特別注意
* slideToggle():通過高度變化來切換匹配元素的可見性巷怜，也可以給定事件和回調(diào)函數(shù)
這是最基本的操作，獲取元素的高度暴氏，使這個元素的高度發(fā)生改變延塑，從而讓元素里的內(nèi)容往下或往上滑。
同樣的提供了時間答渔、還有動畫結(jié)束的回調(diào)关带。在參數(shù)對應(yīng)的時間內(nèi)，元素會完成動畫沼撕，然后出發(fā)回調(diào)函數(shù)
同時也提供了時間的快速定義宋雏，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時
display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值.當(dāng)一個隱藏動畫后务豺，高度值達(dá)到0的時候磨总，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局
// $(document).on("click", function() {
// console.log("哈哈");
//slideDown() 從無到有笼沥，從上往下的出現(xiàn)
//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()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用馆纳，幾乎差不多了诗良，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設(shè)置.css()方法的屬性鍵值對類似鲁驶，除了屬性范圍做了更多限制鉴裹。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了。
properties：一個或多個css屬性的鍵值對所構(gòu)成的Object對象钥弯。要特別注意所有用于動畫的屬性必須是數(shù)字的径荔，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能寿羞。比如常見的猖凛，border赂蠢、margin绪穆、padding、width虱岂、height玖院、font、left第岖、top难菌、right、bottom蔑滓、wordSpacing等等這些都是能產(chǎn)生動畫效果的郊酒。background-color很明顯不可以，因為參數(shù)是red或者GBG這樣的值键袱，非常用插件燎窘，否則正常情況下是不能只用動畫效果的。注意蹄咖，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置褐健，而非 CSS 名稱（比如 "font-size"）。
特別注意單位澜汤，屬性值的單位像素（px）,除非另有說明蚜迅。單位em 和 %需要指定使用。
.animate({
? ? ?left: 50,
? ? ?width: '50px'
? ? ?opacity: 'show',
? ? ?fontSize: "10em",
}, 500);
如果提供一個以+= 或 -=開始的值俊抵，那么目標(biāo)值就是以這個屬性的當(dāng)前值加上或者減去給定的數(shù)字來計算的
.animate({
? ? ?left: '+=50px'
}, "slow");
// 在現(xiàn)有高度的基礎(chǔ)上增加100px
$aaron.animate({
? ? ?width? : "+=100px",
? ? ?height : "+=100px",
});
除了定義數(shù)值谁不，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏徽诲。
.animate({
? ? ?width: "toggle",//改變寬拍谐，從寬上面改變
});
$("#box").animate({
? ? height:"toggle",//改變高烛缔，從高上面改變
},3000)
動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的轩拨；值越大表示動畫執(zhí)行的越慢践瓷，不是越快。還可以提供'fast' 和 'slow'字符串亡蓉，分別表示持續(xù)時間為200 和 600毫秒晕翠。
easing動畫運動的算法
jQuery庫中默認(rèn)調(diào)用 swing。如果需要其他的動畫算法砍濒，請查找相關(guān)的插件
complete回調(diào)
動畫完成時執(zhí)行的函數(shù)淋肾，這個可以保證當(dāng)前動畫確定完成后發(fā)會觸發(fā)
參數(shù)
duration?- 設(shè)置動畫執(zhí)行的時間
easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)
step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)爸邢，就是一個進(jìn)度的概念
complete：動畫完成回調(diào)
如果多個元素執(zhí)行動畫樊卓，回調(diào)將在每個匹配的元素上執(zhí)行一次，不是作為整個動畫執(zhí)行一次
