jQuery UI API - .addClass()

カテゴリ

エフェクト（Effects） | エフェクトコア（Effects Core） | メソッドオーバーロード（Method Overrides）

用法

説明：アニメーションのスタイルが変更されるときに、一致する要素の集合内の各要素に指定された Class を追加します。

戻り値：jQuery

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

引数 型 説明 デフォルト値
className String 一致する各要素の class 属性に追加する 1 つ以上のクラス名。複数のクラス名はスペースで区切ります。
duration Number または String アニメーションの実行時間を指定する文字列または数値。 400
easing String 使用する...を指定する文字列。easing関数。 swing
complete Function() アニメーションが完了したときに呼び出される関数。

.addClass( className [, options ] )

引数 型 説明
className String 一致する各要素の class 属性に追加する 1 つ以上のクラス名。複数のクラス名はスペースで区切ります。
options Object すべてのアニメーション設定。すべてのプロパティはオプションです。
  • duration（デフォルト値：400）
    型：Number または String
    説明：アニメーションの実行時間を指定する文字列または数値。
  • easing（デフォルト値：swing）
    型：String
    説明：使用する...を指定する文字列。easing関数。
  • complete
    型：Function()
    説明：アニメーションが完了したときに呼び出される関数。
  • children（デフォルト値：false）
    型：Boolean
    説明：アニメーションを一致する要素のすべての子孫に適用するかどうかを指定します。この機能は慎重に使用してください。要素がアニメーションの子孫であるかどうかの判定は非常にコストが高く、子孫の数に応じて線形に増加します。
  • queue（デフォルト値：true）
    型：Boolean または String
    説明：アニメーションをエフェクトキューに入れるかどうかを示すブール値。false の場合は、アニメーションはすぐに開始されます。jQuery 1.7 以降、queue オプションは文字列も受け付けます。この場合、アニメーションはその文字列が表すキューに追加されます。

ネイティブ CSS トランジションと同様に、jQuery UI のクラスアニメーションは、ある状態から別の状態へのスムーズな遷移を提供し、すべてのスタイル変更の詳細が JavaScript を必要とせずに CSS で行われることを保証します。すべてのクラスアニメーションメソッドは、以下を含み.addClass()、アニメーションの継続時間と...をカスタマイズすることを許可しeasing関数。

すべてのスタイルがアニメーションできるわけではありません。たとえば、背景画像をアニメーション化することです。アニメーション化できないスタイルは、アニメーションの終了時に変更されます。

このプラグインは、jQuery 組み込みの.addClass()メソッドです。jQuery UI が読み込まれていない場合、呼び出し.addClass()メソッドは直接失敗しません。そのメソッドは jQuery に存在するからです。ただし、期待される動作は発生しません。

実例

一致する要素に class "big-blue" を追加します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.addClass() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big-blue {
    width: 200px;
    height: 200px;
    background-color: #00f;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div></div>
 
<script>
$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>
 
</body>
</html>

その他の拡張