淺談jQuery中的動畫

顯示與隱藏

• show(speed,callback)

speed:動畫執行的時長，單位爲毫秒
callback:動畫執行完畢後的回調函數

• hide(speed,callback)

speed:動畫執行的時長，單位毫秒
callback:動畫執行完畢後的回調函數

滑動式動畫

• slideUp()和slideDown()

沒有無動畫版本(底層代碼預約義動畫執行的時長)，改變指定元素的高度,括號裏面的參數一樣傳時長，單位毫秒

淡入淡出動畫

• fadeOut()和fadeIn()

括號裏的參數接收一個時長，單位爲毫秒

動畫切換

• fadeToggle()

括號裏的參數接收一個時長，單位爲毫秒

自定義動畫

• animate()方法：自定義動畫

1.animate(properties,duration,callback)
properties:表示css的樣式屬性，設置動畫執行結束的樣式屬性值
duration:表示動畫執行的時長，單位爲毫秒
callback：表示動畫執行完畢後的回調函數
2.animate(properties,options)
properties:表示css的樣式屬性，設置動畫執行結束的樣式屬性值
options:表示設置動畫的相關參數
duration：表示動畫執行的時長，單位爲毫秒
complete：表示動畫執行完畢後的回調函數
queue：布爾值，設置是否添加到動畫隊列中

• 併發與排隊效果

併發效果：就是指多個動畫同時執行，多個CSS的樣式屬性值同時改變，動畫多個值綜合效果
排隊效果：就是指多個動畫按照定義的前後順序執行，多個CSS的樣式屬性值前後改變
queue：用於控制當前的動畫效果是併發仍是排隊效果

• 中止執行動畫

stop()方法沒有接收任何參數時：當即中止執行動畫
stop(queue)方法的第一個參數
fasle：表示中止當前動畫，但隊列中的動畫繼續執行
true：表示中止當前動畫，而且清空動畫隊列
stop(queue,gotoEnd)方法的第二個參數
false：不會作任何處理
true：表示中止當前動畫，而且將指定元素設置爲動畫執行完畢後的樣式

• 延遲執行動畫，delay()

語法結構以下

$('div').animate({
    left:800
},3000).delay(1000).animate({
    top:600
},3000);