動く「きっかけ」を指定する基本的な記述

$(function(){
  // 画面の読み込み字に動かしたいソースコードを記述
});

$(window).on('load',function(){
  // 画面が読み込まれた後に動かしたいソースコードを記述
});

※画像などがすべて読み込まれた後に動く。

$(window).on('scroll',function(){
  // 画面がスクロールされたら動かしたいソースコードを記述
});

$('.sample').on('click',function(){
  // クリックしたら動かしたいソースコードを記述
});

※スマホやタブレットで<a>タグ以外のものにクリックイベントを使いたい場合、タップする要素のCSSにcursor: pointer;と指定しないと動作しない。

下記をセットで使用する。

$('.sample').on('mouseenter',function(){
  // マウスが乗ったら動かしたいソースコードを記述
});
$('.sample').on('mouseleave',function(){
  // マウスが乗ったら動かしたいソースコードを記述
});

※色の変化や拡大縮小など、シンプルな動きはCSSのhoverを使えば実現できる。この書き方は、複雑な動きを実現したい時に使用する。
※スマホにも対応する場合、mouseenterの後に半角スペース＆touchstartを、mouseleaveの後に半角スペース＆touchendを追記する。

$('.sample').on('mouseenter touchstart',function(){
});
$('.sample').on('mouseleave touchend',function(){
});

下記をセットで使用する。

$('.sample').on('touchstart',function(){
  // タッチされた時に動かしたいソースコードを記述
});
$('.sample').on('touchend',function(){
  // タッチして指が離れた時に動かしたいソースコードを記述
});

スマホやタブレット閲覧時にPCのhover（マウスが乗った時の挙動）の見せ方を実現したい時などに利用する。

タッチが非対応のデバイスでは動作しない
スマホやタブレット閲覧時は、クリックイベントで指定した時と比較して、タッチイベントの方が動作のレスポンスが早くなる
同じ場所にクリックイベントとタッチイベントを両方指定する場合、両方のイベントが発生するため「タッチイベントが利用できるか判定し、できないのであればクリックイベントに変更する」といった処理をjQueryで指定する必要がある

$(window).on('mousemove',function(){
  // マウスが移動したら動かしたいソースコードを記述
});

$(window).on('resize',function(){
  // 画面がリサイズされたら動かしたいソースコードを記述
});

その他の代表的な動く「きっかけ」を指定する記述

$('.sample').on('animationend',function(){
  // cssアニメーションが終わった後に動かしたいソースコードを記述
});

setTimeout(function(){
  // 時間を遅らせて動かしたいソースコードを記述
}, 1000); // この場合1秒後

WordPressのjQueryを利用して動かす場合、自作のJavaScriptの中に$マークから始まる記述があると動かない場合がある。その時はソースコード全体を、下記のコードでくくると解決する。

jQuery(function($){
  // この中に$マークから始まる記述を書けば動く
});