99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

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

滑入滑出動畫

1. 滑入動畫

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

   使用方式：

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

   time代表執行動畫的時間，function代表動畫執行完之后所要執行的函數

2. 滑出動畫

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

   使用方式：

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

   time代表執行動畫的時間，function代表動畫執行完之后所要執行的函數

3. 滑入滑出切換動畫

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

   使用方式：

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

淡入淡出動畫

1. 淡入動畫

   作用：讓元素以淡淡的進入視線的方式展現出來

   使用方式

   $(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可以是字符串，可以是具體數字 
   也可只有參數一、參數二

顯示隱藏動畫

1. 顯示動畫

   作用： 將Html結構顯現出來

   使用方式

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

2. 隱藏動畫

   作用： 將Html結構隱藏起來

   使用方式

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

停止動畫

• 定義：停止正在執行的動畫

• 使用方式：

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

自定義動畫

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

• 使用方式：

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