jQuery效果

在上一章我們整理了一些jQuery的一些基礎認識。jQuery是一個JavaScript庫，讓很多功能實現起來更加簡潔，因此它也能實現很多的效果出來，如動畫，移動，淡入淡出等等。

1.隱藏，顯示效果

jQuery hide() 和 show()

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

下面的例子演示了帶有 speed 引數的 hide() 方法：

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

//語法：$(selector).toggle(speed,callback);
$("button").click(function(){
  $("p").toggle();
});
 

2.jQuery 效果 - 淡入淡出

jQuery fadeIn() 方法
jQuery fadeIn() 用於淡入已隱藏的元素。

語法:

$(selector).fadeIn(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

jQuery fadeOut() 方法
jQuery fadeOut() 方法用於淡出可見元素。

語法:

$(selector).fadeOut(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 引數是 fading 完成後所執行的函式名稱。

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果。

如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果。

語法:

$(selector).fadeToggle(speed,callback);

jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。

語法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。

3.jQuery 效果 - 滑動

通過 jQuery，您可以在元素上建立滑動效果。

jQuery 擁有以下滑動方法：

• slideDown()
• slideUp()
• slideToggle()

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery 效果- 動畫

jQuery 動畫 - animate() 方法
jQuery animate() 方法用於建立自定義動畫。

語法：

$(selector).animate({params},speed,callback);
必需的 params 引數定義形成動畫的 CSS 屬性。

可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 引數是動畫完成後所執行的函式名稱。

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery animate() - 使用佇列功能
預設地，jQuery 提供針對動畫的佇列功能。

這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop() 方法
jQuery stop() 方法用於停止動畫或效果，在它們完成之前。

stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。

語法:

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。

可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。

因此，預設地，stop() 會清除在被選元素上指定的當前動畫。

4.jQuery Callback 方法

許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。

例子：$(“p”).hide(“slow”)

speed 或 duration 引數可以設定許多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落現在被隱藏了");
  });
});

5.jQuery - 鏈(Chaining)

Chaining 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）。

如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。

下面的例子把 css()、slideUp() 和 slideDown() 連結在一起。“p1” 元素首先會變為紅色，然後向上滑動，再然後向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);