1、動畫基礎隱藏和顯示（show與hide方法是修改的display屬性，通過是visibility屬性佈局需要通過css方法單獨設置）
（1）隱藏元素的hide方法
快捷參數：
.hide("fast / slow") 'fast' 和 'slow' 分別代表200和600毫秒的延時，就是元素會執行200/600毫秒的動畫後再隱藏
方法一
方法二
（2）顯示元素的hide方法
（3）顯示與隱藏切換toggle方法
//.left .right 爲兩個div塊
2、上卷下拉效果
（1）下拉動畫slideDown （ slideDown(fast) slideDown(slow) ）
基本操作：$("ele").slideDown()
執行回調：$("ele").slideDown(1000, function() { //等待動畫執行1秒後,執行別的動作.... });
（2）上捲動畫slideUp（用法同slideDown一樣）
（3）上卷下拉切換slideToggle
3、淡入淡出效果（淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，變化的區間要麼是0，要麼是1）
（1）淡出動畫fadeOut（fadeOut()函數用於隱藏所有匹配的元素，並帶有淡出的過渡動畫效果）
-
.fadeOut("slow / fast"); / .fadeOut(1000); / .fadeOut(1000,"linear"); （這裏的linear是指動畫的行進速度方法（easing），顧名思義就是淡出的速度保持恆定的線性速度。而jQuery 核心默認的easing爲swing,行進速度在動畫開始和結束時比在動畫中間時稍慢。）
-
.fadeOut(2000, function () { });
-
.fadeOut( { duration: 1000 });
（2）淡入動畫fadeIn（fadeIn()函數用於顯示所有匹配的元素，並帶有淡入的過渡動畫效果）
（用法與fadeOut一致）
（3）淡入淡出切換fadeToggle（fadeToggle()函數用於切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果）
（4）淡入效果fadeTo（讓元素保持動畫效果，執行opacity 不爲0或1時的效果）
fadeTo
測試文字透明度效果
測試測試
透明度的設置效果：4、動畫切換的比較
toggle與slideToggle和fadeToggle的比較
-
toggle：切換顯示與隱藏效果
-
sildeToggle：切換上下拉卷滾效果
-
fadeToggle：切換淡入淡出效果
（2）操作元素的顯示和隱藏可以有幾種方法。例如：
-
改變樣式display爲none
-
設置位置高度爲0
-
設置透明度爲0
（3）toggle與slideToggle細節區別：
-
toggle：動態效果爲從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
-
slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
5、自定義動畫
（1）動畫animate
a、所有用於動畫的屬性必須是數字的，除非另有說明；
b、注意屬性值的單位
.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500);c、每個屬性能使用'show', 'hide', 和 'toggle'
//通過toggle參數切換高度
.animate({
width: "toggle"
});d、提供一個以 += 或 -= 開始的值
//在現有高度上增加50px
.animate({
height: '+=50px'
}, "slow");e、CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。
-
duration - 設置動畫執行的時間
-
easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數
-
step：規定每個動畫的每一步完成之後要執行的函數
-
progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念
-
complete：動畫完成回調
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('（2）停止動畫stop
a、stop的幾個函數
-
.stop(); 停止當前動畫，點擊在暫停處繼續開始
-
.stop(true); 如果同一元素調用多個動畫方法，當調用.stop()的時候，隊列中的下一個動畫立即開始。
-
.stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)6、jQuery核心
（1）each方法的應用
-
來處理對象和數組的遍歷（回調函數中傳入的兩個參數，如果遍歷的是數組，第一個參數是索引值，第二個參數是數組的值；如果遍歷是對象，第一個參數是屬性，第二個參數是屬性值。）
-
jQuery.each ( array, callback ) （jQuery.each == $.each）
-
jQuery.each ( object, callback )
（2）查找數組中的索引inArray（用於在數組中搜索指定的值，並返回其索引值。如果數組中不存在該值，則返回 -1。）
-
jQuery.inArray ( value, array , [ fromIndex ] )
-
如果要判斷數組中是否存在指定值，你需要通過該函數的返回值不等於（或大於）-1 來判斷
（3）去空格神器trim方法（jQuery.trim()函數用於去除字符串兩端的空白字符）
（4）DOM元素的get方法
-
get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象
-
get方法是從0開始索引（所以第二個a元素的查找： $(a).get(1)）
- get方法還可以從後往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1
（5）DOM元素的index方法
-
如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置
-
通過傳遞dom查找 $(" li ").index(document.getElementById(" test5 ")
-
通過傳遞jQuery對象查找 $(" li ").index($(" #test5 "))