セレクター :animated

セレクター :animated は、現在アニメーション中の要素を選択します。 エフェクトモジュールなしのカスタム jQuery ビルドを使用している場合、 :animated の使用はエラーを引き起こします。 :animated は CSS 仕様に属さないため、 最新のブラウザーでパフォーマンスを向上させるには、 最初に純粋な CSS セレクターで要素をフィルタリングし、 その後 .filter(':animated') を適用するのが良いでしょう。

構文

アニメーション中の要素を次のように選択します：

javascript$(':animated');

例

関数 animateIt を使用して、四角形の1つでアニメーションを開始させましょう。 #change ボタンをクリックするたびに、アニメーション中の四角形の色が、 クラス colored を toggleClass メソッドで追加/削除することで、緑から赤に、またその逆に変わります：

html<button id="change">change</button>

<div></div>
<div id="test"></div>

cssdiv {
  background: green;
  border: 1px solid #AAA;
  width: 80px;
  height: 80px;
  margin: 0 5px;
  float: left;
}
div.colored {
  background: red;
}

javascript$('#change').click(function() {
  $('div:animated').toggleClass('colored');
});

function animateIt() {
  $('#test').slideToggle('slow', animateIt);
}

animateIt();

関連項目