Jqueryui-addclass
JqueryUI-クラスを追加
この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* addClass()*メソッドについて説明します。 _addClass()_メソッドを使用すると、CSSプロパティの変更をアニメーション化できます。
_addClass()_メソッドは、すべてのスタイル変更をアニメーション化しながら、指定されたクラスを一致した要素に追加します。
構文
jQueryUIのバージョン1.0で追加
- addClass()*メソッドの基本的な構文は次のとおりです-
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_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。
Sr.No. | Parameter & Description |
---|---|
1 |
className これは、1つ以上のCSSクラスを含むストリングです(スペースで区切られます)。 |
2 |
options これは、すべてのアニメーション設定を表します。 すべてのプロパティはオプションです。 可能な値は-
|
例
次の例は、_addClass()_メソッドの使用方法を示しています。
単一のクラスを渡す
上記のコードをHTMLファイル addclassexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。
複数のクラスを渡す
この例は、_addClass_メソッドに複数のクラスを渡す方法を示しています。
上記のコードをHTMLファイル addclassexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-