[TOC] # 動畫方法 **注意** 用戶頻繁觸發帶有動畫效果的元素的動畫，觸發的次數會被記錄下來，直到所有的動畫執行完畢為止--JQuery的動畫列隊現象 可以用stop()清除動畫列隊，放在動畫函數之前調用（動畫函數有slideUp，slideDown，show，hide） **若stop()無法清除干凈動畫列隊，可以傳入 個true參數，硬性清除** ``` $(".nav>ul>li").hover(function () {/*鼠標的離開和進入可以當做是顯示隱藏的切換效果*/ $(this).children("ul").stop().slideToggle(); }); ``` ## 1.常用的方法 ### 1.動畫 #### 1.1 顯示 和隱藏 以及切換 對角線方向發生的動畫效果 ***** show() 顯示（參數寫數字代表動畫出現過渡） hide（） 隱藏 toggle() 顯示隱藏切換 #### 1.2滑動動畫 滑動動畫 -----------豎直方向上的動畫效果 **給做動畫的外面盒子一個高度，布局穩定** ***** slideDown() 滑動顯示（向下） slideUp（） 滑動隱藏 （向上） slideToggle（） 滑動顯示隱藏切換 ***** **注意** 在直接操作圖片img滑動顯示隱藏時，需要去給img一個給定的寬，不然會變成對角線上的變化 ，同時需要把img轉換為塊級元素 ***** #### 1.3淡入淡出動畫（透明度動畫） $().fadeIn() 淡入 $().fadeout() 淡出 $().fadeToggle() 切換 $().fadeTo(時間，透明度) 需要多少時間（毫秒）透明到多少 #### 1.4自定義動畫 animate(params,speed,easing,callBack) a. params是一個對象。在該對象中以鍵值對的方式來要控制的屬性樣式和對應的值表示 （去掉雙引號的話屬性要用駝峰命名，不用單位） ****animate動畫只能實現屬性值是數字的動畫效果 z-index 不可以作動畫***** b. speed 控制速度，可以是默認字符串中的某個（“slow” “normal” “fast”）可以自定義數字，1000為一毫秒 c. easing 控制動畫的表現效果，通常有 linear(勻速) 和swing 等固定值。(swing為默認值) d. callBack 動畫執行完畢后的回調函數 ```javascript $("button").eq(0).click(function () { $("div").animate( { width:"+=400", "height":"400px", marginTop:100, borderRadius :50, fontSize:20, textIndent:40, },1000,'linear',function () { alert("我完成動畫了"); }); }) ``` ***** **JQuery所提供的其他動畫函數也有這后面三個參數** ``` $("div").show(1000,"linear",function(){ alert("動畫執行結束了") }); ``` #### 1.5 延遲 delay() 讓后面的動畫函數延遲時間執行 ### 2.1獲取索引值 jq給每個元素進行編號（索引值），從0開始 ------同級狀態有關系，與本身是什么標簽沒有關系 $().index() 獲取索引值 ### 2.2 類的控制 #### 2.2.1添加類 $().addClass() ----可以同時添加多個類 #### 2.2.2刪除類 $().removeClass() -----不寫參數表示刪除所有的類名，有參數則為指定刪除類名 #### 2.2.3切換類 $().toggleClass() -------切換類（有就刪除，無則添加）