JqueryUI-クラスを追加

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* addClass（）*メソッドについて説明します。 _addClass（）_メソッドを使用すると、CSSプロパティの変更をアニメーション化できます。

_addClass（）_メソッドは、すべてのスタイル変更をアニメーション化しながら、指定されたクラスを一致した要素に追加します。

構文

jQueryUIのバージョン1.0で追加

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

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className これは、1つ以上のCSSクラスを含むストリングです（スペースで区切られます）。
2	duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
3	easing これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

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

.addClass( className [, options ] )

Sr.No.

Parameter & Description

1

className

これは、1つ以上のCSSクラスを含むストリングです（スペースで区切られます）。

2

options

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

duration -これはNumber型またはString型で、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
easing -これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール型で、一致した要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。デフォルト値は_false_です。
キュー-これはブール型または文字列型で、アニメーションをエフェクトキューに配置するかどうかを表します。デフォルト値は_true_です。

例

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

単一のクラスを渡す

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>

      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>

      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>

   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

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

[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。

複数のクラスを渡す

この例は、_addClass_メソッドに複数のクラスを渡す方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>

      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>

   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>