jQueryでアニメーション中の要素にだけCSSを適用する方法

jQueryには本来のCSSにない疑似クラスみたいなものが用意されています。

その1つが :animated  というアニメ中の要素を選択するためのクラス

ここではこのクラスの使い方やコード例についてまとめてみました。

jQueryで使える :animated について

これは冒頭で書いたようにアニメーション中の要素を選択するためクラスです。

ただしjQuery独自のものなのでCSSでは :animated が使用できないことに要注意

 

用途としてはセレクタ内でアニメ中の要素だけを選択する場合などに使います。

例えば次はdiv要素のうちアニメーション中のものだけ背景色を変更するコード例

厳密にはjQuery独自の使用なので疑似クラスではないです。

しかし上コードの div:animated  みたく疑似クラスみたいに書くことができます。

 

jQueryを使ってアニメ中の要素だけを選択できるので

  • 動きのある要素だけ背景色を変えたい
  • 要素のアニメとスタイルを切り離したい
  • アニメ中に特別なCSSクラスを与えたい

などの場合に役立つと思います。

:animated の注意点 : CSS由来のアニメには効かない

このように便利な :animated  ですが1つ注意点があります。

それはCSSによりアニメーションしている要素は選択できないということ

例えばその例をいくつか挙げるとするなら

  • transitionプロパティを使ってアニメーション
  • animationプロパティを使ってアニメーション

などの場合が :animated  が無視されるパターンです。

 

例えば次がCSSによるアニメ要素に :animated  を適用しようとしているNG例

この例だとCSS中で @keyframes  を使って作ったアニメを div.motion  に適用しています。

そしてjQeury内で .box:animated  からアニメ中要素を絞り込み、red_boxクラスを付与しようとしていますが、上手くいきません。

このようにCSS由来のアニメだと :animated  が全く効かないのが少し厄介な所ですね。

 

ちなみに全体のコードと実行例を載せておくと次のCodePenの通り

See the Pen 【jQuery】:animated が効かない例 by ぴー助 (@pisuke-code) on CodePen.

アニメ要素の色変更」ボタンを何回押したとしてもアニメ中要素の色は変わりません。

:aniamtedが正しく動くコード例

NG例を紹介したついでに正しく動くコード例についても紹介します。

今度はCSS由来ではなくjQuery側でアニメーションしている要素にCSSを適用したいと思います。

 

そのコード例は次の通り

上コードで何をしているかについてはコメントを見てください。

簡単にまとめるなら ボタンが押される ⇒ アニメ中の要素( div.motion  )に対して blue_box  というクラスを付与 ⇒ 要素の背景色を変更 というような処理

先ほどと違うのはjQuery側で slideToggle を使ってアニメ効果を付与していることです。

 

ちなみに全体のコード例と動作例については次のCodePenの通り

See the Pen 【jQuery】:animated の使用例 by ぴー助 (@pisuke-code) on CodePen.

アニメ要素の色変更」ボタンを押すたびにスライドしている要素の色が 青 ⇒ 緑 ⇒ 青 ⇒ 緑・・・ というように交互に変わります。

ここまでのまとめ

ということで :animated  の簡単なまとめ

  • アニメ要素を選択できるjQuery独自の使用
    例えば div:animted  のようにすればアニメ中のdiv要素だけを選択可能
    ただしjQuery独自のものなのでCSSでは使えないことに注意!
  • CSS由来のアニメ要素には使用不可
    例えばanimationプロパティによりアニメーションしている要素には効かない
    なのでjQuery側でアニメ効果をつけている要素だけに適用されることにも要注意!

ここまでで何度も書いたように :animated  はjQeury独自の使用です。

なので間違ってCSS内で使ったり、jQuery以外でアニメーションさせた要素をセレクタで選択しようとする、などのことををしないよう気を付けましょう。

以上 :animated  の使い方やコード例についてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください