jQueryのUIのAPI - .addClass()
カテゴリ
特殊効果(エフェクト) | エフェクトコア(コアエフェクト) | メソッドオーバーロード(メソッドをオーバーライドします)
使用法
説明:アニメーションのスタイルが追加指定されたクラス内のマッチした要素の集合の各要素に変更。
戻り値: jQueryの
.addClass( className [, duration ] [, easing ] [, complete ] )
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
className | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
.addClass( className [, options ] )
参数 | 类型 | 描述 |
---|---|---|
className | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
スタイルの変更のすべての詳細は、JavaScriptを使用せずに、CSSを介して行われることを確保しながら、jQueryのUIのアニメーションクラスは、1の状態からの遷移の別の状態へのスムーズな移行を提供し、ネイティブCSSに似て移行します。 構成するすべてのクラスのアニメーション、 .addClass()
、アニメーションのカスタム期間を可能にし、 イージング機能を、アニメーションも、コールバックを提供して完了です。
すべてのスタイルを追加するためにアニメーション化することができません。 例えば、背景画像をアニメーション。 ていない任意のアニメーションのスタイルは、アニメーションの最後に変更されます。
jQueryのからのプラグインの拡張機能は、内蔵.addClass()メソッドを。 jQueryのUIがロードされていない場合、呼び出し.addClass()
メソッドはjQueryのに存在するため、単純に失敗しない方法を。 しかし、それは行動を期待されていません。
例
「ビッグブルー」のマッチング要素にクラスを追加します。
<!DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル> .addClass()デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <スタイル> div要素{ 幅:100ピクセル; 高さ:100pxに。 背景色:#CCC; } .bigブルー{ 幅:200pxの; 高さ:200pxの; 背景色:#00F; } </スタイル> <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> </ HEAD> <ボディ> <DIV> </ DIV> <スクリプト> $( "本部").click(関数(){ $(この).addClass(「ビッグブルー」、1000年、「easeOutBounce "); }); </スクリプト> </ BODY> </ HTML>