動かすきっかけの記述

jQuery

  1. HOME
  2. jQueryきっかけ

動くきっかけの指定記述

サイト内でどの操作をしたときに、jQueryを発火させるのか!代表的な記述の仕方を学んでいく。

画面の読み込み

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

画面が読み込まれた後

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

画面のスクロール

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

画面のリサイズ

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

要素やクラス・ID名をクリック

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

要素やクラス・ID名にマウスが乗ったり外れたりした時

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

$('●●').on('mouseleave', function () {
 //マウスが外れたら動かしたいソースコードを記述
})

要素やクラス・ID名がタッチされたり外れたりした時

$('●●').on('touchstart', function () {
 //タッチされた時に動かしたいソースコードを記述する
});

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

マウスが移動

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

要素やクラス・ID名のCSSアニメーションが終わった後

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

〇秒遅れて動く

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

WordPressのjQueryを利用して自作のJSを読み込むときの書き方

jQuery(function($){
 // この中に$マークからはじまる記述
});
自作のJavaScriptの中に$マークからはじまる記述があると動かない場合があります。その時はソースコード全体を、上記のコードでくくると解決する