jQuery基礎 效果

亦世發表於2018-06-21
jQuery

jQuery 效果 - 隱藏和顯示

語法：

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

$(selector).show(speed,callback);
複製程式碼

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

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

jQuery toggle()

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

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

語法：

$(selector).toggle(speed,callback);複製程式碼

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

可選的 callback 引數是 toggle() 方法完成後所執行的函式名稱。

jQuery 效果 - 淡入淡出

jQuery 擁有下面四種 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()    允許漸變為給定的不透明度（值介於 0 與 1 之間）$(selector).fadeTo(speed,opacity,callback);

jQuery 效果 - 滑動

jQuery 滑動方法

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

jQuery 擁有以下滑動方法：

  • slideDown()  下滑
  • slideUp()    上滑
  • slideToggle()    切換滑動   $(selector).slideToggle(speed,callback);

jQuery 效果 - 動畫

jQuery 動畫 - animate() 方法

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

語法：

$(selector).animate({params},speed,callback);複製程式碼

必需的 params 引數定義形成動畫的 CSS 屬性。

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

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

提示：預設地，所有 HTML 元素都有一個靜態位置，且無法移動。

如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在核心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛。

jQuery animate() - 使用相對值

也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：

例項

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});複製程式碼

jQuery animate() - 使用預定義的值

您甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"：

例項

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});複製程式碼

jQuery animate() - 使用佇列功能

預設地，jQuery 提供針對動畫的佇列功能。

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

例項 1

隱藏，如果您希望在彼此之後執行不同的動畫，那麼我們要利用佇列功能：

$("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");
});複製程式碼

例項 2

下面的例子把 <div> 元素移動到右邊，然後增加文字的字號：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});複製程式碼

jQuery 停止動畫

jQuery stop() 方法

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

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

語法

$(selector).stop(stopAll,goToEnd);複製程式碼

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

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

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

jQuery - Chaining

通過 jQuery，您可以把動作/方法連結起來。

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

提示：這樣的話，瀏覽器就不必多次查詢相同的元素。

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

例子 

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);複製程式碼


相關文章