JqueryUI-クラスを追加

この章では、 addClass()メソッド。jQueryUIの視覚効果を管理するために使用されるメソッドの1つです。addClass（）メソッドを使用すると、CSSプロパティへの変更をアニメーション化できます。

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

構文

jQueryUIのバージョン1.0で追加されました

ザ・ addClass() メソッドの基本的な構文は次のとおりです。

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

シニア番号	パラメータと説明
1	className これは、1つ以上のCSSクラス（スペースで区切られている）を含む文字列です。
2	duration これはタイプが数値または文字列であり、効果のミリ秒数を示します。値0は、進行せずに要素を新しいスタイルで直接取得します。デフォルト値は400です。
3	easing これはString型であり、エフェクトを進める方法を示します。デフォルト値はswingです。可能な値はここにあります。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加されました

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

.addClass( className [, options ] )

シニア番号	パラメータと説明
1	className これは、1つ以上のCSSクラス（スペースで区切られている）を含む文字列です。
2	options これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は次のとおりです。 duration−これは、タイプが数値または文字列であり、効果のミリ秒数を示します。値0は、進行せずに要素を新しいスタイルで直接取得します。デフォルト値は400です。 easing−これはString型であり、エフェクトを進める方法を示します。デフォルト値はswingです。可能な値はここにあります。 complete −これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。 children−これはブール型であり、一致した要素のすべての子孫にアニメーションを追加で適用する必要があるかどうかを表します。デフォルト値はfalseです。 queue−これはブール型または文字列型であり、アニメーションをエフェクトキューに配置するかどうかを表します。デフォルト値は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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

複数のクラスを渡す

この例は、複数のクラスを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>