WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

CSS3の登場により、Webにおけるアニメーションは、CSSを使ったアニメーションが、jQueryを使ったアニメーションに取って代わって来ました。
というのも、jQueryやJavaScriptを使うよりもCSSを使ったほうが、同じアニメーションでも遥かに動作が軽いからです。Webサイトは今や、PCのみならずスマートフォンやタブレットからの方が多くアクセスされる時代となり、動作の軽さがこれまでよりも多く求められます。

そこで今回は、そんな時に役立つjQueryのaddClassやremoveClassについてのテクニックをお伝えします。

classの付け外しによってアニメーションを実現

See the Pen jquery_css_animation by TAKASHI (@takashi1107) on CodePen.

こちらのResultタブの中にある赤いボックスをクリックしてみてください。JavaScriptにより「large」というclassが付け外しされ、CSS効果によりアニメーションしています。

では、「クリックして2秒後にサイズを変えたい」という場合はどうでしょうか？

classの付け外しに「delay」は使用できない

通常、jQueryにおいて、時間差で何か実行したい場合は「delay(xxx)」を使用しますが、今回のような場合は、そのままdelayを使用しても効果がありません。実際に下記をご覧ください。（JSタブとResultタブをご覧ください。）

See the Pen jquery_css_animation2 by TAKASHI (@takashi1107) on CodePen.

delayを入れているにも関わらず、クリックした瞬間にボックスのサイズが変わっているのがわかります。これは、delayが働いておらず、クリックのタイミングでclassの付け外しが行われてしまっているからです。
ではこのような場合どうすれば良いのでしょうか。

一度キューに入れて処理すればOK

jQueryには、処理を一度「キュー（処理待ちの列）」に入れる「queue」という命令があります。こちらを利用することで時間差でclassの付け外しをすることが可能です。
下記のJSタブとResultタブをご覧ください。

See the Pen jquery_css_animation3 by TAKASHI (@takashi1107) on CodePen.

classの付け外しをするという処理をクリックされた2秒後にキューに入れ、処理した後にキューから取り出す（dequeue）という流れになっています。
「『toggleClassという処理』を2秒間遅らせる」というよりも、「『toggleClassするという処理をキューに入れるという処理』を2秒後におこなう」といった感じです。
このようにすることによって、最初の要望通り、時間差でclassを付け外しし、アニメーションのタイミングもずらすことが出来ました。

まとめ

今回ご紹介した手法を使えば、ページを読み込んでから時間差で要素が出現/消滅するなどの効果を実現することができます。また工夫次第では、並列でいくつも並んでいる要素を、少しずつ時間差でずらして登場させるといった印象に残りやすい効果を実現することもできます。
今回の問題でお困りの方がいれば、ぜひ試してみてください。

次回は「jQueryでCSSをまとめて設定したい」という内容でお送りする予定です。

シリーズの前回記事はこちら

jQueryでの「困った」を解決！（1）クリックしたのに動かない？