よく使われているjQueryの単語の意味や使い方の事例をまとめました。
独自の名前を付けて定義する
●var（変数を定義する）
var headerH = $(‘#header’).outerHeight(true); //ヘッダーの高さを取得
var scroll = $(window).scrollTop(); //スクロールの値を取得
if (scroll >= headerH){ //ヘッダーの高さ以上までスクロールしたら
$(‘.openbtn’).addClass(‘fadeDown’);//.openbtnにfadeDownというクラス名を付与して
}else{ //それ以外は
$(‘.openbtn’).removeClass(‘fadeDown’); //fadeDownというクラス名を除く
}
●function 独自の関数名(){}（動きを関数でまとめて定義する）
//===== 1.動きをfadeAnimeという名前の関数で定義する
function fadeAnime(){
$(‘.fadeInTrigger’).each(function (){ //fadeInTriggerというクラス名が
var elemPos = $(this).offset().top-50; //要素より、50px上の
var scroll =$(window).scrollTop;
var windowHeight = $(window).height();
if (scroll >= elemPos – windowHeight){
$(this).addClass(‘fadeIn’); //画面内に入ったらfadeInというクラス名を追記
}else{
$(this).removeClass(‘fadeIn’); //画面外に出たらfadeInというクラス名を外す
}
});
}
//===== 2.定義した名前をページが読み込まれた後・スクロールした後それぞれのきっかけに指定
//画面をスクロールをしたら動く場合の記述
$(window).scroll(function () {
fadeAnime(); /*アニメーション用の関数を呼ぶ */
});//ここまで画面をスクロールをしたら動く場合の記述
//ページが読み込まれたらすぐに動く場合の記述
$(window).on(‘load’, function(){
fadeAnime(); /* アニメーション用の関数を呼ぶ */
});//ここまでページが読み込まれたらすぐに動く場合の記述
