jQueryのUIの例 - 変換クラス(クラススイッチ)
マッチした要素のセット内のアニメーションスタイルの変更は、指定されたクラスの各要素を追加および削除するとき。
詳細については.switchClass()
メソッドの詳細については、APIドキュメントを参照してください)(.switchClassを 。
.switchClass()デモ
効果をプレビューするには、ボタンをクリックしてください。
<!DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル> jQueryのUIエフェクト - .switchClass()デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css"> <スタイル> .toggler {幅:500pxなど;高さ:200pxの;位置:相対;} #button {パディング:.5em 1EM;テキスト装飾:なし;} #effect {位置:相対;} .newClass {幅:240ピクセル;パディング:1EM;文字間隔:0;フォントサイズ:1.2em;マージン:0;} .anotherNewClass {テキストインデント:40ピクセル;文字間隔:.4em;幅:410px;高さ:100pxに;パディング:30px;マージン:10pxの;フォントサイズ:1.6em;} </スタイル> <スクリプト> $(関数(){ $( "#button").click(関数(){ $( ".newClass」).switchClass(「NewClass"、 "anotherNewClass"、1000); $( ".anotherNewClass」).switchClass(「AnotherNewClass"、 "newClass"、1000); falseを返します。 }); }); </スクリプト> </ HEAD> <ボディ> <DIVクラス= "トグラー"> <DIVのID = "効果"クラス= "newClass UI-コーナー-すべて"> Etiamリベロneque、luctus、NEC、でゼンパー、Loremの。セッドのpedeをeleifend。 </ DIV> </ DIV> <a href="#" id="button" class="ui-state-default ui-corner-all">実行影響します</a> </ BODY> </ HTML>