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