jQuery提供了JS未能提供的動(dòng)畫效果，利用jQuery的動(dòng)畫效果，可以極大的簡(jiǎn)化JS動(dòng)畫部分的邏輯

滑入滑出動(dòng)畫

1. 滑入動(dòng)畫

   定義：以下拉方式動(dòng)畫效果將html內(nèi)容顯示出來

   使用方式：

   $(selector).slideDown(time,function) 
   $(selector).slideDown(2000) 
   $(selector).slideDown() 
   $(selector).slideDown(fast/normal/slow)

   time代表執(zhí)行動(dòng)畫的時(shí)間，function代表動(dòng)畫執(zhí)行完之后所要執(zhí)行的函數(shù)

2. 滑出動(dòng)畫

   定義：以上滑方式動(dòng)畫效果將html內(nèi)容隱藏出來

   使用方式：

   $(selector).slideUp(time,function) 
   $(selector).slideUp(2000) 
   $(selector).slideUp() 
   $(selector).slideUp(fast/normal/slow)

   time代表執(zhí)行動(dòng)畫的時(shí)間，function代表動(dòng)畫執(zhí)行完之后所要執(zhí)行的函數(shù)

3. 滑入滑出切換動(dòng)畫

   定義：在滑入滑出動(dòng)畫間切換

   使用方式：

   $(selector).slideToggle(time,function) 
   $(selector).slideToggle(2000) 
   $(selector).slideToggle() 
   $(selector).slideToggle(fast/normal/slow)

淡入淡出動(dòng)畫

1. 淡入動(dòng)畫

   作用：讓元素以淡淡的進(jìn)入視線的方式展現(xiàn)出來

   使用方式

   $(selector).fadeIn(time,function) 
   $(selector).fadeIn(2000) 
   $(selector).fadeIn() 
   $(selector).fadeIn(fast/normal/slow)

2. 淡出動(dòng)畫

   作用：讓元素以淡淡的離開視線的方式隱藏起來

   使用方式

   $(selector).fadeOut(time,function) 
   $(selector).fadeOut(2000) 
   $(selector).fadeOut() 
   $(selector).fadeOut(fast/normal/slow)

3. 淡入淡出切換動(dòng)畫

   作用：讓元素在淡入淡出動(dòng)畫切換

   使用方式

   $(Selector).fadeToggle(time,function) 
   $(selector).fadeToggle(2000) 
   $(selector).fadeToggle() 
   $(selector).fadeToggle(fast/normal/slow)

4. 修改opacity

   作用： 修改opacity的值

   使用方式

   $(Selector).fadeTo(time,opacity,function) 
   time可以是字符串，可以是具體數(shù)字 
   也可只有參數(shù)一、參數(shù)二

顯示隱藏動(dòng)畫

1. 顯示動(dòng)畫

   作用： 將Html結(jié)構(gòu)顯現(xiàn)出來

   使用方式

   $(Selector).show(time，function) 
   $(selector).show(2000) 
   $(selector).show() 
   $(selector).show(fast/normal/slow)

2. 隱藏動(dòng)畫

   作用： 將Html結(jié)構(gòu)隱藏起來

   使用方式

   $(Selector).hide(time，function) 
   $(selector).hide(2000) 
   $(selector).hide() 
   $(selector).hide(fast/normal/slow)

停止動(dòng)畫

• 定義：停止正在執(zhí)行的動(dòng)畫

• 使用方式：

  $(selector).stop() 
  stop()中可以有兩個(gè)參數(shù)，參數(shù)一：后續(xù)動(dòng)畫是否執(zhí)行，參數(shù)二：當(dāng)前動(dòng)畫是否執(zhí)行完畢，默認(rèn)的是（false,false),注意第一個(gè)參數(shù)，true代表的是后續(xù)動(dòng)畫不執(zhí)行 
  ———————————————————————————— 
  第一種:(false，false) 
  后續(xù)動(dòng)畫會(huì)執(zhí)行，當(dāng)前動(dòng)畫不會(huì)執(zhí)行完 
  第二種:(false，true) 
  后續(xù)動(dòng)畫會(huì)執(zhí)行，當(dāng)前動(dòng)畫會(huì)執(zhí)行完 
  第三種:(true，false) 
  后續(xù)動(dòng)畫不會(huì)執(zhí)行，當(dāng)前動(dòng)畫不會(huì)執(zhí)行完 
  第四種:(true，true) 
  后續(xù)動(dòng)畫不會(huì)執(zhí)行，當(dāng)前動(dòng)畫會(huì)執(zhí)行完

自定義動(dòng)畫

• 作用：執(zhí)行一組CSS屬性的自定義動(dòng)畫

• 使用方式：

  $(selector).animate({CSS定義},time,function())