Webサイトにアニメーションを加えるときによく使われるjQuery。

ホームページ制作初心者でも扱いやすいJavaScriptライブラリとして、多くのサイトに導入されていますが、jQueryを動作させるタイミングを自由にコントロールできると制作の幅も広がります。

今回は「要素をクリックした時」「ウインドウ幅を変更した時」など、特定のアクションごとにjQueryをそれぞれ動作させるための書き方をまとめました。

jQueryを好きなタイミングで動作スタートさせよう！

まず初めはもっともよく使われているであろうこの書き方。

jQuery動作開始トリガーの基本。画面読み込みと同時に動作させる場合

はい。これはもう定番というかjQueryを使ううえでのお約束的なものですね。

これはHTMLなどのドキュメントの読み込みが終わったときにjQueryの処理が開始される書き方になります。

画像などすべてを含めたデータの読み込みが終わってから動作させたい場合

先程の書き方とは少し異なり、画像や動画などのページで使用されるデータが全部読み込まれた状態でjQueryが発火します。

サイトデータを全て読み込んでから動画を再生させる、とかそういった場合に役立ちます。

１つ目の書き方との違いについて詳しくは次のリンク先が参考になります。jQueryがHTMLドキュメントを扱うために構築するDOMツリーについてもわかりやすく解説されているのでぜひ読んでみてください。

参考：$(function(){}) と $(window).on(‘load’,function(){}) の違い – Qiita

要素をクリックしたら動作させたい場合

ある要素をクリックしたら動作するアニメーションを加えたい、なんて時によく使うのがこちらの書き方。

ダブルクリックに限定するなら次のような書き方もありますよ。

ダブルクリックのはあまり使ったことがないですが参考までにどうぞ。

画面サイズを変更するたびに動作させたい場合

レスポンシブを意識したホームページ制作でよく使うのがこのトリガー。

ウインドウをリサイズしたときに指定したjQueryが動作します。

「画像を全画面サイズで表示させたい」といった時、画面がリサイズされるたびに縦横サイズを取得してjQueryを画像サイズを調整し直すというケースなどで役に立ちます。

まとめ

jQueryを使い始めた初心者のかたでも、今回まとめたように動作のトリガーとなるパターンを整理しておくとずっとjQueryは扱いやすくなります。

他にもよく使うパターンが思い浮かんだら追加をしておこうと思うのでご参考いただければ幸いです！

それではまた！

求人の応募が集まる採用サイト、採用コストを下げる広告運用のご相談も承っています。