jQueryには本来のCSSにない疑似クラスみたいなものが用意されています。
その１つが :animated というアニメ中の要素を選択するためのクラス
ここではこのクラスの使い方やコード例についてまとめてみました。
jQueryで使える :animated について
これは冒頭で書いたようにアニメーション中の要素を選択するためクラスです。
ただしjQuery独自のものなのでCSSでは :animated が使用できないことに要注意
用途としてはセレクタ内でアニメ中の要素だけを選択する場合などに使います。
例えば次はdiv要素のうちアニメーション中のものだけ背景色を変更するコード例
|
1 2 3 4 5 |
$(function(){ $(div:animated).css({ 'background', 'lightgreen' }); }); |
厳密にはjQuery独自の使用なので疑似クラスではないです。
しかし上コードの div:animated みたく疑似クラスみたいに書くことができます。
jQueryを使ってアニメ中の要素だけを選択できるので
- 動きのある要素だけ背景色を変えたい
- 要素のアニメとスタイルを切り離したい
- アニメ中に特別なCSSクラスを与えたい
などの場合に役立つと思います。
:animated の注意点 : CSS由来のアニメには効かない
このように便利な :animated ですが１つ注意点があります。
それはCSSによりアニメーションしている要素は選択できないということ
例えばその例をいくつか挙げるとするなら
- transitionプロパティを使ってアニメーション
- animationプロパティを使ってアニメーション
などの場合が :animated が無視されるパターンです。
例えば次がCSSによるアニメ要素に :animated を適用しようとしているNG例
|
1 2 3 4 5 6 7 8 |
<button id="try_btn">アニメ要素の色変更</button> <br> <div class="box"></div> <div class="box motion"></div> <div class="box"></div> <div class="box motion"></div> <div class="box"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** animationでアニメ効果付与 */ .motion{ animation: kaiten 2s ease; animation-iteration-count: infinite; } /** 適用するアニメーション */ @keyframes kaiten{ 0% { transform: scale(0.5); } 50%{ transform: scale(1.0); } 100%{ transform: scale(0.5); } } /** アニメ中要素に付与したいクラス */ .red_box{ background: rgb(255, 100, 100); } |
|
1 2 3 4 5 |
$(function(){ $('#try_btn').on('click', function(){ $('.box:animated').toggleClass('red_box'); }); }); |
この例だと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を適用したいと思います。
そのコード例は次の通り
|
1 2 3 4 5 6 7 8 9 |
<!-- このボタンが押されたらアニメ要素に専用CSS適用 --> <button id="try_btn">アニメ要素の色変更</button> <br> <div class="box"></div> <div class="box motion"></div> <div class="box"></div> <div class="box motion"></div> <div class="box"></div> |
|
1 2 3 4 |
/** アニメ要素に適用するクラス */ .blue_box{ background: rgb(100, 100, 255); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ /** ボタン押下時にアニメ中要素のCSSを変更 */ $('#try_btn').on('click', function(){ $('.box:animated').toggleClass('blue_box'); }); /** スライドアップ・ダウンを繰り返す */ var animateBox = function(){ $('.motion').slideToggle(1000, animateBox); }; animateBox(); }); |
上コードで何をしているかについてはコメントを見てください。
簡単にまとめるなら ボタンが押される ⇒ アニメ中の要素（ 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 の使い方やコード例についてでした。
