jQueryのUIの例 - クラスの切り替え（トグルクラス）
アニメーションのスタイルは、追加または1つ以上のクラスを削除するには、各要素のマッチした要素のセット内のクラスの存在とスイッチパラメータの値に応じて、変更する場合。
詳細については.toggleClass()メソッドの詳細については、APIドキュメントを参照してください）（.toggleClassを 。
.toggleClass（）デモ
効果をプレビューするには、ボタンをクリックしてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIエフェクト - .toggleClass（）デモ</タイトル>
<リンクの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 {位置：相対;幅：240ピクセル;パディング：1EM;文字間隔：0;フォントサイズ：1.2em;国境：1pxの固体＃000;背景：#eee;色：＃333;}
.newClass {テキストインデント：40ピクセル;文字間隔：.4em;幅：410px;高さ：100pxに;パディング：30px;マージン：10pxの;フォントサイズ：1.6em;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#button"）.click（関数（）{
$（ "#effect」）.toggleClass（「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>