JqueryUI-スイッチクラス

この章では、操作に役立つ新しいクラスである* switchClass（）*メソッドについて説明します。 _switchClass（）_メソッドは、あるCSSクラスから別のCSSクラスに移動し、ある状態から別の状態への遷移をアニメーション化します。

構文

jQueryUIのバージョン1.0で追加

switchClass（）*メソッドの基本的な構文は次のとおりです-

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	removeClassName これは文字列であり、削除するCSSクラス名、またはクラス名のスペース区切りリストを表します。
2	addClassName これはString型で、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られた）を表します。
3	duration これは、Number型またはString型で、オプションで_slow、normal、fast、_、またはミリ秒単位のエフェクトの期間のいずれかを提供します。省略すると、animate（）メソッドがデフォルトを決定します。デフォルト値は_400_です。
4	easing animate（）メソッドに渡されるイージング関数の名前。
5	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。

.switchClass( removeClassName, addClassName [, options ] )

Sr.No.

Parameter & Description

1

removeClassName

これは文字列であり、削除するCSSクラス名、またはクラス名のスペース区切りリストを表します。

2

addClassName

これはString型で、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られた）を表します。

3

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は-

duration -アニメーションの実行時間を決定する文字列または数値。デフォルト値は_400_です。
easing -遷移に使用するイージング関数を示す文字列。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール値であり、一致する要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。
queue -これは文字列/ブール型で、アニメーションをエフェクトキューに配置するかどうかを示します。

例

次の例は、_switchClass（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>

      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>

   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br/>
      <input type = "button" id = "btnSwitch" value = "Switch Class"/>
   </body>
</html>

上記のコードをHTMLファイル switchclassexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

_Switch Class_ボタンをクリックして、ボックスでのクラスの効果を確認します。

Jqueryui-switchclass

目次

JqueryUI-スイッチクラス

構文

jQueryUIのバージョン1.0で追加

jQueryUIのバージョン1.9で追加

例