jQuery函數學習之八(Effects部分)

    這一節我們來學習一下jQuery實現一些動畫的函數，我初步實驗了一下，效果非常不錯。以前純粹自己實現的漸顯，漸隱等
要寫很多代碼的，現在基本一行搞定，大家可以試試哦。

 

函數：animate(params, speed, easing, callback)
功能：這是個用來設定自訂動畫的函數，這個函數的關鍵之處在於這個對象
      的那些樣式屬性將設為動畫和什麼時候終止
返回：jQuery對象
參數：
params (Hash): 要設定改變的一系列屬性
speed (String|Number): 可選的，可以為 ("slow", "normal", or "fast")或以微秒為單位的數字. 
easing (String): 可選的，easing對象需要外掛程式
callback (Function): 可選的，動畫執行完成後執行的動作
例子：
jQuery Code
$("p").animate({
  left: 50, opacity: 'show'
}, 500);

 

 

函數：fadeIn(speed,callback),fadeOut(speed,callback),fadeTo(speed,opacity,callback)
功能：匹配元素的漸顯效果，漸隱效果，漸層效果
返回：jQuery對象
參數：
speed (String|Number): 可選的，可以為 ("slow", "normal", or "fast")或以微秒為單位的數字. 
callback (Function): 可選的，動畫執行完成後執行的動作
opacity：透明度
例子：
jQuery Code
$("p").fadeOut("slow");

jQuery Code
$("p").fadeOut("slow",function(){
  alert("Animation Done.");
});

$("p").fadeTo("slow", 0.5);
jQuery Code
$("p").fadeTo("slow", 0.5, function(){
  alert("Animation Done.");
});

 

 

函數：hide(speed,callback),hide()
功能：以一定的速度隱藏，或立即隱藏
返回：jQuery對象
例子：
jQuery Code
$("p").hide("slow");

jQuery Code
$("p").hide("slow",function(){
  alert("Animation Done.");
});

 

 

函數：show(),show(speed,callback)
功能：以一定的速度顯示，或立即顯示
返回：jQuery對象
例子：
jQuery Code
$("p").show("slow");

jQuery Code
$("p").show("slow",function(){
  alert("Animation Done.");
});

 

 

函數：slideDown(speed,callback),slideUp(speed,callback),slideToggle(speed,callback)
功能：以一定速度向下展開，向上收縮，如果隱藏則向下展開，如果顯示則向上收縮
返回：jQuery對象
參數：
speed (String|Number): 可選的，可以為 ("slow", "normal", or "fast")或以微秒為單位的數字. 
callback (Function): 可選的，動畫執行完成後執行的動作
例子：
jQuery Code
$("p").slideDown("slow");
jQuery Code
$("p").slideDown("slow",function(){
  alert("Animation Done.");
});

 

 

函數:toggle()
功能：切換匹配元素的可見度，如果本來是不可見，則顯示，否則不顯示
返回：jQuery對象
例子：無