jQuery提供了JS未能提供的動畫效果，利用jQuery的動畫效果，可以極大的簡化JS動畫部分的邏輯

滑入滑出動畫

1. 滑入動畫

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

   使用方式：

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

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

2. 滑出動畫

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

   使用方式：

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

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

3. 滑入滑出切換動畫

   定義：在滑入滑出動畫間切換

   使用方式：

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

淡入淡出動畫

1. 淡入動畫

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

   使用方式

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

2. 淡出動畫

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

   使用方式

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

3. 淡入淡出切換動畫

   作用：讓元素在淡入淡出動畫切換

   使用方式

   $(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ù)二

顯示隱藏動畫

1. 顯示動畫

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

   使用方式

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

2. 隱藏動畫

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

   使用方式

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

停止動畫

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

• 使用方式：

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

自定義動畫

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

• 使用方式：

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