「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」といったjQueryの代表的な「動くきっかけ」の記述の仕方を理解していきましょう。
動く「きっかけ」を指定する基本的な記述
１）画面の読み込み時に動く
$(function() {
//画面の読み込み時に動かしたいソースコードを記述
});
２）画面が読み込まれた後に動く
$(window).on(‘load’,function(){
//画面が読み込まれた後に動かしたいソースコードを記述
});
※画像などがすべて読み込まれた後に動きます。
３）画面がスクロールされたら動く
$(window).on(‘scroll’,function(){
//画面がスクロールされたら動かしたいソースコードを記述
});
４）要素やクラス/ID名をクリックしたら動く
「●●」は要素やクラスID名を指定します。
$(‘●●’).on(‘click’, function(){
//クリックしたら動かしたいソースコードを記述する
})
・スマホやタブレットで<a>タグ以外のものにクリックイベントを使いたい場合、
タップする要素のCSSにcursor:pointer;と指定しないと動作しません。
５）要素やクラス/ID名にマウスが乗ったり外れたりしたら動く
下記をセットで使用します。「●●」は要素やクラスID名を指定します。
$(‘●●’).on(‘mouseenter’, function(){
//マウスが乗ったら動かしたいソースコードを記述
})
$(‘●●’).on(‘mouseleave’, function(){
//マウスが外れたら動かしたいソースコードを記述
})
※色の変化や拡大縮小など、シンプルな動きはCSSのhoverを使えば実現できます。
この書き方は、複雑な動きを実現したいときに使用します。
６）要素やクラス/ID名がタッチされたり外れたりしたら動く
下記をセットで使用します。「●●」は要素やクラスID名を指定します。
$(‘●●’).on(‘touchstart’, function(){
//タッチされた時に動かしたいソースコードを記述する
});
$(‘●●’).on(‘touchend’, function(){
//タッチして指が離れた時に動かしたいソースコードを記述する
});
スマホやタブレット閲覧時にPCのhover（マウスが乗ったときの挙動）の見せ方を実現したいときなどに使用します。
- タッチが非対応のデバイスでは動作しません。
- スマホやタブレット閲覧時は、クリックイベントで指定したときと比較して、タッチイベントの方が動作のレスポンスが早くなります。
- 同じ場所にクリックイベントとタッチイベントを両方指定する場合、両方のイベントが発生するので「タッチイベントが利用できるか判定し、できないのであればクリックイベントに変更する」といった処理をjQueryで指定する必要があります。
７）マウスが移動したら動く
$(windows).on(‘mousemove’, function(){
//マウスが移動したら動かしたいソースコードを記述する
});
８）画面がリサイズされたら動く
$(windows).on(‘resize’, function(){
//画面がリサイズされたら動かしたいソースコードを記述する
});
その他の代表的な動く「きっかけ」を指定する記述
１）要素やクラス/ID名のCSSアニメーションが終わった後に動く
「●●」は要素やクラスID名を指定します。
$(‘●●’).on(‘animationend’, function() {
//CSSアニメーションが終わった後に動かしたいソースコードを記述する
})
2)●秒遅れて動く
setTimeout(function () {
// 時間を遅らせて動かしたいソースコードを記述する
}, 1000); //この場合１秒
３）ページが遷移したときに動く場合は…
シンプルなアニメーションであればCSS3の記述のみで実現できます。
前述「４）要素やクラス/ID名をクリックしたら動く」のクリックイベントを利用しても実現できます。
