動畫DOM及其CSS的操作

• 原理
  我們需要以固定的時間間隔（如0.1s），每次DOM元素的CSS樣式修改一點(diǎn)點(diǎn)（如寬和高增加10%），看起來就像動畫了。
• jQuery封裝了三類動畫函數(shù)。1.show（），hide（）,toggle()?？刂屏四繕?biāo)元素的寬、高、透明度三個CSS屬性。2.fadeIn(),fadeout(),fadeToggle()，不控制寬高，只控制透明度。3.slideDown(),slideUp(),slideToggle(),控制高度和透明度，不控制寬度

自定義動畫

animate()
可以實(shí)現(xiàn)任意動畫效果，需要傳遞的參數(shù)量DOM元素最終的CSS狀態(tài)和時間。
語法：
$(selector).animate(styles,speed,easing,callback)
如：

var div = $('#test');
div.animate({opacity:0.25,
width:'256px',
height:'256px'},3000);

參數(shù)：

• speed
  可選。規(guī)定元素從隱藏到完全可見的速度。默認(rèn)為 "0"。
  可能的值：
  毫秒 （比如 1500）
  "slow"
  "normal"
  "fast"
  在設(shè)置速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內(nèi)邊距和透明度。

• callback
  可選。show 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

stop()
stop() 方法停止當(dāng)前正在運(yùn)行的動畫。
語法：
$(selector).stop(stopAll,goToEnd)

• stopAll 可選。規(guī)定是否停止被選元素的所有加入隊(duì)列的動畫。
• goToEnd 可選。規(guī)定是否允許完成當(dāng)前的動畫。該參數(shù)只能在設(shè)置了 stopAll 參數(shù)時使用。
  delay()
  delay() 方法對隊(duì)列中的下一項(xiàng)的執(zhí)行設(shè)置延遲。
  語法：
  $(selector).delay(speed,queueName)
• speed 可選。規(guī)定延遲的速度。
  可能的值：
  • 毫秒
  • "slow"
  • "fast"
• queueName 可選。規(guī)定隊(duì)列的名稱。默認(rèn)是 "fx"，標(biāo)準(zhǔn)效果隊(duì)列。
  show()/hide()
  直接以無參形式調(diào)用show()和hide()，會顯示和隱藏DOM元素，但是只要傳遞一個時間參數(shù)進(jìn)去，就成了動畫
  語法：
  $(selector).show(speed,callback)
  例如：

var div = $('#test-hide');
div.hide(2000);//在2秒內(nèi)逐漸消失

參數(shù)：

• speed
  可選。規(guī)定元素從隱藏到完全可見的速度。默認(rèn)為 "0"。
  可能的值：
  毫秒 （比如 1500）
  "slow"
  "normal"
  "fast"
  在設(shè)置速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內(nèi)邊距和透明度。
• callback
  可選。show 函數(shù)執(zhí)行完之后，要執(zhí)行的函
  除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)。

toggle()
根據(jù)當(dāng)前狀態(tài)決定是show()和hide()
語法:
$(selector).toggle(speed,callback,switch)
參數(shù)：

• speed
  可選。規(guī)定元素從可見到隱藏的速度（或者相反）。默認(rèn)為 "0"。
  可能的值：
  毫秒 （比如 1500）
  "slow"
  "normal"
  "fast"
  在設(shè)置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內(nèi)邊距和透明度。
  如果設(shè)置此參數(shù)，則無法使用 switch 參數(shù)。

• callback
  可選。toggle 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。
  除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)。

• switch
  可選。布爾值。規(guī)定 toggle 是否隱藏或顯示所有被選元素。
  True - 顯示所有元素
  False - 隱藏所有元素
  如果設(shè)置此參數(shù)，則無法使用 speed 和 callback 參數(shù)。

fadein()/fadeout()淡入淡出
也是通過不斷設(shè)置opacity屬性來實(shí)現(xiàn)，只控制透明度
屬性和用法與show()/hide()相同
fadeToggle()
根據(jù)元素是否可見來決定下一動作
屬性和用法和toggle()相同，只控制透明度

slideUp()/slideDown()
slideDown()：顯示；slideUp()：消失。類似于卷閘門。常用于下拉菜單效果。slideToggle()，整體是個百葉窗效果。
語法：
$(selector).slideUp(speed,callback)
參數(shù)：

• speed
  和前面的speed一樣
• callback
  和前面的callback一樣

通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
slideToggle()
如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。
$(selector).slideToggle(speed,callback)
參數(shù)同上

計時器

setTimeout()和setInterval()
語法：
setTimeout(code,millisec)
方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式

• setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。