jQuery 3.1 API中文文檔


歡迎大家訪問我的個人網站《劉江的博客和教程》:www.liujiangblog.com

主要分享Python 及Django教程以及相關的博客


jQuery 3.1 API中文文檔

一、核心

1.1 核心函數

jQuery([selector,[context]])

接收一個包含 CSS 選擇器的字符串,然后用這個字符串去匹配一組元素。
jQuery 的核心功能都是通過這個函數實現的。 jQuery中的一切都基於這個函數,或者說都是在以某種方式使用這個函數。這個函數最基本的用法就是向它傳遞一個表達式(通常由 CSS 選擇器組成),然后根據這個表達式來查找所有匹配的元素。
默認情況下, 如果沒有指定context參數,$()將在當前的 HTML document中查找 DOM 元素;如果指定了 context 參數,如一個 DOM 元素集或 jQuery 對象,那就會在這個 context 中查找。在jQuery1.3.2以后,其返回的元素順序等同於在context中出現的先后順序。

jQuery(html,[ownerDocument])

根據提供的原始 HTML 標記字符串,動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

jQuery(callback)

$(document).ready()的簡寫。
允許你綁定一個在DOM文檔載入完成后執行的函數,可以在一個頁面中使用任意多個$(document).ready事件。

$(function(){
  // 文檔就緒
});

jQuery.holdReady(hold)

暫停或恢復.ready() 事件的執行。

1.2 對象訪問


#### each(callback) 循環元素並執行callback函數。 函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。 如果你想得到 jQuery對象,可以使用 $(this) 函數。 你可以使用 'return' 來提前跳出 each() 循環。

HTML 代碼:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>

jQuery 代碼:

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

size()和length

Query 對象中元素的個數。
與 length 將返回相同的值。

selector

返回你用什么選擇器來找元素的。可以與context一起使用,用於精確檢測選擇器查詢情況。

context

返回傳給jQuery()的原始的DOM節點內容,即jQuery()的第二個參數。如果沒有指定,那么context指向當前的文檔(document)。

get()

取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。從0開始,返回的是DOM對象,類似的有eq(index),不過eq(index)返回的是jQuery對象。

index([selector|element])

搜索匹配的元素,並返回相應元素的索引值,從0開始計數。

1.3 數據緩存


#### data([key],[value]) 在元素上存放或讀取數據,返回jQuery對象。

removeData([name|list])

在元素上移除存放的數據,與 data([key], [value]) 函數作用相反

1.4 隊列控制


#### queue(element,[queueName]) 顯示或操作在匹配元素上執行的函數隊列

dequeue([queueName])

從隊列最前端移除一個隊列函數,並執行他。隊列名默認為fx

clearQueue([queueName])

清空對象上尚未執行的所有隊列
如果不帶參數,則默認清空的是動畫隊列。這跟 stop(true)類似,但 stop(true)只能清空動畫隊列,而這個可以清空所有通過 .queue() 創建的隊列。

1.5 插件機制


####jQuery.fn.extend(object) 擴展 jQuery 元素集來提供新的方法(通常用來制作插件)。
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

定義了兩個用戶自定義的函數check和uncheck。調用方式:

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

jQuery.extend(object)

擴展jQuery對象本身。用來在jQuery命名空間上增加新函數。

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

調用方式:

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

1.6 多庫共存


#### jQuery.noConflict([extreme]) 運行這個函數將變量`$`的控制權讓渡給第一個實現它的那個庫。 這有助於確保jQuery不會與其他庫的`$`對象發生沖突。 在運行這個函數后,就只能使用jQuery變量訪問jQuery對象。例如,在要用到$("div p")的地方,就必須換成jQuery("div p")。 '''注意:'''這個函數必須在你導入jQuery文件之后,並且在導入另一個導致沖突的庫'''之前'''使用。當然也應當在其他沖突的庫被使用之前,除非jQuery是最后一個導入的。

二、選擇器

選擇器的符號:

符號 用途
# id
.
* 所有
組合
空格 祖孫
> 父子
+ 緊隨
~ 兄弟
篩選
[] 屬性

2.1 基本選擇器


#### #id 根據給定的ID匹配一個元素。
使用任何的元字符(如!"#$%&'()*+,./:;<=>?@[\]^{|}~)作為名稱的文本部分, 它必須被兩個反斜杠轉義:\\。

element

根據給定的元素標簽名匹配所有元素

.class

根據給定的css類名匹配元素。
一個元素可以有多個類,只要有一個符合就能被匹配到。且不會被重復搜索。

*

匹配所有元素
多用於結合上下文來搜索。

selector1,selector2,selectorN

所謂的組合選擇器,其實就是多個選擇器寫在一起了。

2.2 層級選擇器


#### ancestor descendant 在給定的祖先元素下匹配所有的后代元素。 #### parent > child 在給定的父元素下匹配所有的子元素

prev + next

匹配所有緊接在 prev 元素后的 next 元素。必須緊跟,不能有間隔,不能跨層級。而且是第一個元素!prev可能會找到很多個,但每個prev后最多只能匹配一個next。

prev ~ siblings

匹配 prev 元素之后的所有 同輩元素。

2.3 基本篩選器

用法:$("selector:xxx")

  • :first 第一個
  • :not(selector)取反
  • :even偶數
  • :odd奇數
  • :eq(index)索引
  • :gt(index)大於索引
  • :lt(index)小於索引
  • :lang(language)語言
  • :last最后一個
  • :header標題
  • :animated動畫
  • :focus焦點元素
  • :root文檔根元素
  • :target目標元素

2.4 內容

  • :contains(text)包含文本
  • :empty空元素
  • :has(selector)包含指定元素
  • :parent包含子元素或文本

2.5 可見性

  • :hidden不可見的元素
  • :visible可見的元素

2.6 屬性

  • [attribute]包含指定屬性的元素
  • [attribute=value]屬性等於值
  • [attribute!=value]不等於值
  • [attribute^=value]以值開頭
  • [attribute$=value]以值結尾
  • [attribute*=value]值中包含
  • [selector1][selector2][selectorN]組合屬性篩選器

2.7 子元素

  • :first-child為每個父元素匹配第一個子元素
  • :last-child為每個父元素匹配最后一個子元素
  • :first-of-type忘了它!
  • :last-of-type忘了它!
  • :nth-child匹配其父元素下的第N個子或奇偶元素
  • :nth-last-child(n|even|odd|formula)選擇所有他們父元素的第n個子元素。
  • :nth-last-of-type(n|even|odd|formula)選擇所有他們的父級元素的第n個子元素
  • :nth-of-type(n|even|odd|formula)選擇同屬於一個父元素之下,並且標簽名相同的子元素中的第n個。
  • :only-child如果某個元素是父元素中唯一的子元素,那將會被匹配
  • :only-of-type選擇所有沒有兄弟元素,且具有相同的元素名稱的元素。

2.8 表單

  • :input匹配所有 input, textarea, select 和 button 元素
  • :text匹配所有的單行文本框
  • :password匹配所有密碼框
  • :radio匹配所有單選按鈕
  • :checkbox匹配所有復選框
  • :submit匹配所有提交按鈕
  • :image匹配所有圖像域
  • :reset匹配所有重置按鈕
  • :button匹配所有按鈕
  • :file匹配所有文件域

2.9 表單對象屬性

  • :enabled匹配所有可用元素
  • :disabled匹配所有不可用元素
  • :checked匹配所有選中的被選中元素(復選框、單選框等)
  • :selected匹配所有選中的option元素

2.10 混淆選擇器

  • $.escapeSelector(selector)
    通常被用在類選擇器或者ID選擇器中包含一些CSS特殊字符的時候,這個方法基本上與CSS中CSS.escape()方法類似,唯一的區別是jquery中的這個方法支持所有瀏覽器。

三、AJAX

3.1 ajax請求


### 3.2 ajax事件
### 3.3 其它

四、屬性

4.1 屬性


#### attr(name|properties|key,value|fn) 設置或返回被選元素的屬性值。

removeAttr(name)

匹配的元素中刪除一個屬性

prop(name|properties|key,value|fn)

獲取在匹配的元素集中的第一個元素的屬性值。與attr的唯一區別是它更適合checkbox的checked屬性的設置,true或者false。而不是attr中的checked。

removeProp(name)

刪除由.prop()方法設置的屬性集

4.2 CSS類


#### addClass(class|fn) 為每個匹配的元素添加指定的類名。

removeClass([class|fn])

從所有匹配的元素中刪除全部或者指定的類。

toggleClass(class|fn[,sw])

如果存在(不存在)就刪除(添加)一個類。

4.3 HTML/text/val


* html([val|fn]) 取得第一個匹配元素的html內容。 * text([val|fn]) 取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。 * val([val|fn|arr]) 獲得匹配元素的當前值。

五、CSS

5.1 CSS樣式


#### css(name|pro|[,val|fn]) 訪問或修改匹配元素的樣式屬性。

jQuery.cssHooks

直接向 jQuery 中添加鈎子,用於覆蓋設置或獲取特定 CSS 屬性時的方法,目的是為了標准化 CSS 屬性名或創建自定義屬性。

5.2 位置


#### offset([coordinates]) 獲取匹配元素在當前視口的相對偏移。 返回的對象包含兩個整型屬性:top 和 left,以像素計。此方法只對可見元素有效。

position()

獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整型屬性:top 和 left。為精確計算結果,請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

scrollTop([val])

獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。

scrollLeft([val])

獲取匹配元素相對滾動條左側的偏移。此方法對可見和隱藏元素均有效。

5.3 尺寸


#### height([val|fn]) 取得匹配元素當前計算的高度值(px)。 #### width([val|fn]) 取得第一個匹配元素當前計算的寬度值(px)。

innerHeight()

獲取第一個匹配元素內部區域高度(包括補白、不包括邊框)。

innerWidth()

獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)。

outerHeight([options])

獲取第一個匹配元素外部高度(默認包括補白和邊框)。

outerWidth([options])

獲取第一個匹配元素外部寬度(默認包括補白和邊框)。

六、文檔處理

6.1 內部插入


#### append(content|fn) 向每個匹配的元素內部最后面追加內容。

appendTo(content)

把所有匹配的元素追加到另一個指定的元素元素集合中。

prepend(content)

向每個匹配的元素內部前置內容。

prependTo(content)

把所有匹配的元素前置到另一個、指定的元素元素集合中。

6.2 外部插入


#### after(content|fn) 在每個匹配的元素之后插入內容。也就是外部緊跟着的位置。 #### before(content|fn) 在每個匹配的元素之前插入內容。 #### insertAfter(content) 把所有匹配的元素插入到另一個、指定的元素集合的后面。after方法的顛倒操作。 #### insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素集合的前面。before的顛倒操作。

6.3 包裹


#### wrap(html|element|fn) 把所有匹配的元素用其他元素的結構化標記包裹起來。 #### unwrap() 移出元素的父元素。這能快速取消 .wrap()方法的效果。 #### wrapAll(html|ele) 將所有匹配的元素用單個元素包裹起來 #### wrapInner(htm|element|fnl) 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

6.4 替換


#### replaceWith(content|fn) 將所有匹配的元素替換成指定的HTML或DOM元素。 #### replaceAll(selector) 用匹配的元素替換掉所有 selector匹配到的元素。上面的顛倒操作。

6.5 刪除


#### empty() 刪除匹配的元素集合中所有的子節點。會留下元素標簽。 #### remove([expr]) 從DOM中刪除所有匹配的元素。什么都不留下。 #### detach([expr]) 從DOM中刪除所有匹配的元素。與remove()不同的是,所有綁定的事件、附加的數據等都會保留下來。

6.6 復制


#### clone([Even[,deepEven]]) 克隆匹配的DOM元素並且選中這些克隆的副本。 在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。

七、篩選

7.1 過濾


#### eq(index|-index) 獲取當前鏈式操作中第N個jQuery對象,返回jQuery對象,當參數大於等於0時為正向選取,比如0代表第一個,1代表第二個。當參數為負數時為反向選取,比如-1為倒數第一個。 #### first() 獲取第一個元素 #### last() 獲取最后個元素 #### hasClass(class) 檢查當前的元素是否含有某個特定的類,如果有,則返回true。 其實就是 is("." + class)。 #### filter(expr|obj|ele|fn) 篩選出與指定表達式匹配的元素集合。 這個方法用於縮小匹配的范圍。用逗號分隔多個表達式 #### is(expr|obj|ele|fn) 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。 #### map(callback) 將一組元素轉換成其他數組(不論是否是元素數組) 可以用這個函數來建立一個列表,不論是值、屬性還是CSS樣式,或者其他特別形式。 #### has(expr|ele) 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 #### not(expr|ele|fn) 將與指定表達式匹配的元素挑除出去 #### slice(start, [end]) 選取一個匹配的子集。切片!

7.2 查找


#### children([expr]) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

closest(expr|object|element)

從元素本身開始,逐級向上級元素匹配,並返回最先匹配的元素。

find(expr|obj|ele)

搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。

next([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。

nextAll([expr])

查找當前元素之后所有的同輩元素。

nextUntil([exp|ele][,fil])

查找當前元素之后所有的同輩元素,直到遇到匹配的那個元素為止。

offsetParent()

返回第一個匹配元素用於定位的父節點。

parent([expr])

取得一個包含着所有匹配元素的唯一父元素的元素集合。

parents([expr])

取得一個包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。

parentsUntil([expr|element][,filter])

查找當前元素的所有的父輩元素,直到遇到匹配的那個元素為止。

prev([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

prevAll([expr])

查找當前元素之前所有的同輩元素

prevUntil([exp|ele][,fil])

查找當前元素之前所有的同輩元素,直到遇到匹配的那個元素為止。

siblings([expr])

取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。

7.3 串聯


#### add(expr|ele|html|obj[,con]) 把與表達式匹配的元素添加到jQuery對象中。這是往已經選出來的元素集合中手動添加元素的方法。 #### addBack() 添加堆棧中元素集合到當前集合,一個選擇性的過濾選擇器。 #### contents() 查找匹配元素內部所有的子節點(包括文本節點)。如果元素是一個iframe,則查找文檔內容。 #### end() 回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。

八、事件

8.1 頁面載入


#### ready(fn) 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。 這是事件模塊中最重要的一個函數,因為它可以極大地提高web應用程序的響應速度。 簡單地說,這個方法純粹是對向window.load注冊事件的替代方法。通過使用這個方法,可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數,而99.99%的JavaScript函數都需要在那一刻執行。 有一個參數--對jQuery函數的引用--會傳遞到這個ready事件處理函數中。可以給這個參數任意起一個名字,並因此可以不再擔心命名沖突而放心地使用$別名。 請確保在 ` `元素的onload事件中沒有注冊函數,否則不會觸發+$(document).ready()事件。可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照(代碼中的)先后順序依次執行。

jQuery 代碼:

$(document).ready(function(){
  // 在這里寫你的代碼...
});

或者使用 $(document).ready() 的簡寫,同時內部的 jQuery 代碼依然使用 $ 作為別名,而不管全局的 $ 為何。

$(function($) {
  // 你可以在這里繼續使用$作為別名...
});

8.2 事件處理


#### on(events,[selector],[data],fn) 在選擇元素上綁定一個或多個事件的事件處理函數。 on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。 它是jquery所有綁定事件的底層方法。 #### off(events,[selector],[fn]) 在選擇元素上移除一個或多個事件的事件處理函數。 off() 方法移除用.on()綁定的事件處理程序。 #### bind(type,[data],fn) 為每個匹配元素的特定事件綁定事件處理函數。 jQuery 3.0中已棄用此方法,請用 on()代替。 #### unbind(type,[data|fn]]) bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。 jQuery 3.0中已棄用此方法,請用 off()代替。 #### one(type,[data],fn) 為每一個匹配元素的特定事件(像click)綁定一個一次性的事件處理函數。 #### trigger(type,[data]) 在每一個匹配的元素上觸發某類事件。 #### triggerHandler(type, [data]) 觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作,也不會產生事件冒泡。

8.3 事件委派

  • live(type, [data], fn)已經廢棄
  • die(type, [fn])已經廢棄
  • delegate(selector,[type],[data],fn)在jQuery 3.0中棄用此方法,請用 on()代替。
    委派事件,讓后加入的元素自動具有同類的事件觸發功能
  • undelegate([selector,[type],fn])在jQuery 3.0中已棄用此方法,請用 off()代替。
    解除委派事件。

8.4 事件切換


#### hover([over,]out) 一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法,它為頻繁使用的任務提供了一種“保持在其中”的狀態。over:鼠標移到元素上要觸發的函數。out:鼠標移出元素要觸發的函數。

toggle([speed],[easing],[fn])

用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。

8.5 事件

  • blur([[data],fn])失去焦點
  • change([[data],fn])元素值發生改變
  • click([[data],fn])點擊
  • dblclick([[data],fn])雙擊
  • error([[data],fn])錯誤
  • focus([[data],fn])獲取焦點
  • focusin([data],fn)可以在父元素上檢測子元素獲取焦點的情況
  • focusout([data],fn)可以在父元素上檢測子元素失去焦點的情況
  • keydown([[data],fn])按下某個鍵
  • keypress([[data],fn])每插入一個字符,就會發生該事件
  • keyup([[data],fn])按鍵彈起
  • mousedown([[data],fn])鼠標按下
  • mouseup([[data],fn])鼠標松開
  • mouseenter([[data],fn])鼠標穿過被選元素
  • mouseleave([[data],fn])鼠標離開被選元素
  • mousemove([[data],fn])鼠標在被選元素或它的子元素中移動,其.clientX 和 .clientY 屬性代表鼠標的坐標
  • mouseout([[data],fn])鼠標離開被選元素或它的子元素
  • mouseover([[data],fn])鼠標指針位於元素上方時
  • resize([[data],fn])窗口大小被調整
  • scroll([[data],fn])滾動指定的元素
  • select([[data],fn])被選擇
  • submit([[data],fn])提交表單
  • unload([[data],fn])離開頁面

示例
描述:在服務器端記錄JavaScript錯誤日志:
jQuery 代碼:

$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});

描述:隱藏JavaScript錯誤:
jQuery 代碼:

$(window).error(function(){
  return true;
});

描述:給你IE的用戶隱藏無效的圖像:
jQuery 代碼:

$("img").error(function(){
  $(this).hide();
});

描述:在頁面內對鍵盤按鍵做出回應,可以使用如下代碼:
jQuery 代碼:

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按鍵可以做不同的事情
    // 不同的瀏覽器的keycode不同
    // 更多詳細信息:     http://unixpapa.com/js/key.html
    // 常用keyCode: 空格 32   Enter 13   ESC 27 CTRL 17
  }
});

描述:獲得鼠標指針在頁面中的位置:
jQuery 代碼:

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

描述:如果你要阻止表單提交:
jQuery 代碼:

$("form").submit( function () {
  return false;
} );

九、動畫效果

9.1 基本


#### show([speed,[easing],[fn]]) 顯示隱藏的匹配元素。 speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值(如:1000) fn:在動畫完成時執行的函數,每個元素執行一次。 easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"

hide([speed,[easing],[fn]])

隱藏顯示的元素。
speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值(如:1000)
fn:在動畫完成時執行的函數,每個元素執行一次。
easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"

toggle([speed],[easing],[fn])

用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。
其實就是在顯示和隱藏兩種狀態之間進行切換。

9.2 滑動


#### slideDown([speed],[easing],[fn]) 以滑動方式顯示隱藏的元素。參數同樣。

slideUp([speed,[easing],[fn]])

以滑動方式隱藏元素。參數同樣。

slideToggle([speed],[easing],[fn])

在顯示和隱藏兩種狀態之間進行滑動切換。

9.3 淡入淡出


#### fadeIn([speed],[easing],[fn]) 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成后可選地觸發一個回調函數。這個是顯示出來,不是藏起來,下一個才是。

fadeOut([speed],[easing],[fn])

淡出,藏起來!

fadeTo([[speed],opacity,[easing],[fn]])

把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成后可選地觸發一個回調函數。opacity:一個0至1之間表示透明度的數字。
這個就是指定顯示到多少透明度了!

fadeToggle([speed,[easing],[fn]])

淡入淡出的切換。

9.4 自定義


#### animate(params,[speed],[easing],[fn]) 用於創建自定義動畫的函數。 這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性(如“height”、“top”或“opacity”)。注意:所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left. 而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值,樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值,則會為該屬性調用默認的動畫形式。

白話說就是,指定某個樣式作為最終狀態,元素會自動平滑的從當前樣式過渡到指定的樣式。

描述:在600毫秒內切換段落的高度和透明度

jQuery 代碼:
$("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, "slow");

在一個動畫中同時應用三種類型的效果

$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

stop([clearQueue],[jumpToEnd])

停止所有在指定元素上正在運行的動畫。
如果隊列中有等待執行的動畫(並且clearQueue沒有設為true),他們將被馬上執行

delay(duration,[queueName])

設置一個延時來推遲執行隊列中之后的項目。

$('#foo').slideUp(300).delay(800).fadeIn(400);

finish( [queue ] )

停止當前正在運行的動畫,刪除所有排隊的動畫,並完成匹配元素所有的動畫。

9.5 設置


#### jQuery.fx.off 關閉頁面上所有的動畫。 把這個屬性設置為true可以立即關閉所有動畫(所有效果會立即執行完畢)。 當把這個屬性設成false之后,可以重新開啟所有動畫。
  jQuery.fx.off = true;    //關閉 動畫

jQuery.fx.interval

設置動畫的顯示幀速。

jQuery.fx.interval = 100;//100毫秒


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM