jQuery UI API - .addClass()
所屬類別
特效(Effects) | 特效核心(Effects Core) | 方法重載(Method Overrides)
用法
描述:當(dāng)動畫樣式改變時,為匹配的元素集合內(nèi)的每個元素添加指定的 Class。
返回:jQuery
參數(shù) | 類型 | 描述 | 默認(rèn)值 |
---|---|---|---|
className | String | 要添加到每個匹配的元素的 class 屬性中的一個或多個 class 名稱,多個 class 名稱用空格分隔。 | |
duration | Number 或 String | 一個字符串或一個數(shù)字,指定動畫將運(yùn)行多久。 | 400 |
easing | String | 一個字符串,指示要使用的 easing 函數(shù)。 | swing |
complete | Function() | 一旦動畫完成時要調(diào)用的函數(shù)。 |
參數(shù) | 類型 | 描述 |
---|---|---|
className | String | 要添加到每個匹配的元素的 class 屬性中的一個或多個 class 名稱,多個 class 名稱用空格分隔。 |
options | Object | 所有的動畫設(shè)置。所有的屬性是可選的。
|
與原生的 CSS 過渡相似,jQuery UI 的 class 動畫提供了一個平穩(wěn)的從一個狀態(tài)轉(zhuǎn)換到另一個狀態(tài)的過渡,同時確保所有樣式變化的細(xì)節(jié)是通過 CSS 來完成的,而不需要使用 JavaScript。所有的 class 動畫方法,包括 .addClass()
,允許自定義動畫持續(xù)時間和 easing 函數(shù),在動畫完成時也提供了一個回調(diào)。
并非所有的樣式都可以進(jìn)行動畫添加。例如,對背景圖像進(jìn)行動畫化。任何不能動畫化的樣式都將在動畫的結(jié)尾改變。
該插件擴(kuò)展自 jQuery 內(nèi)置的 .addClass() 方法。如果 jQuery UI 未加載,調(diào)用 .addClass()
方法不會直接失敗,因為該方法在 jQuery 中存在。但是不會發(fā)生預(yù)期的行為。
實例
添加 class "big-blue" 到匹配的元素。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>.addClass() 演示</title> <link rel="stylesheet" rel="external nofollow" target="_blank" > <style> div { width: 100px; height: 100px; background-color: #ccc; } .big-blue { width: 200px; height: 200px; background-color: #00f; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> </head> <body> <div></div> <script> $( "div" ).click(function() { $( this ).addClass( "big-blue", 1000, "easeOutBounce" ); }); </script> </body> </html>
更多建議: