動くWebデザイン
アイディア帳

（例）
if($('li').hasClass('close')){//liにクラス名closeがあれば
	$('li').removeClass('close');//liのクラス名を除去する
}

（例）
$(".openbtn").click(function () {//openbtnというクラス名をクリックしたら
  $(this).addClass("active");//openbtnにactiveクラスを追加する
});

（例）
$(".navigation").click(function () {//navigationというクラス名をクリックしたら
  $(".bgnavi").removeClass("active");//bgnaviクラスについているactiveクラスを削除
});

（例）
$(".openbtn").click(function () {//openbtnというクラス名をクリックしたら
  $(this).toggleClass("active");//openbtnにactiveクラスがついていなかったら追加し、ついていたら削除
});

（例）
$('.accordion').parent().addClass('active');//.accordionの親要素を取得してactiveクラスを追加する

（例）
 $('.accordion').children().addClass('active');//.accordionの子要素を取得してactiveクラスを追加する

（例）
$(".forcus-btn").click(function() {//forcus-btnをクリックしたら
    $("table").find(".forcus").css("backgroundColor", "#ccc");//tableの中にある.forcusクラスがついている要素の背景を灰色にする
});

（例）
$('.article-list').fadeIn(900);//.article-listが0.9秒かけてフェードイン

（例）
$("#splash-logo").fadeOut(1200);//#splash-logoを1.2秒でフェードアウト

（例）
$('.btn').click(function(){
        $('.article-block').show();//.btnをクリックしたら.article-blockを表示
});

（例）
$('.btn').click(function(){
        $('.article-block').hide();//.btnをクリックしたら.article-blockが非表示
});

（例）
$('.title').on('click', function() {//.titleをクリックしたら
	$('.box').slideDown(500);//.boxを0.5秒かけてスライドしながら表示
});

（例）
$('.title').on('click', function() {//.titleをクリックしたら
	$('.box').slideUp(500);//.boxを0.5秒かけてスライドしながら非表示
});

（例）
$('.title').on('click', function() {//.titleをクリックしたら
	$('.box').slideToggle(500);//.boxが 0.5秒かけてスライド表示、非表示
});

（例）
$('#page-top').click(function () {// #page-topをクリックしたら
    $('body,html').animate({//bodyとhtmlの
        scrollTop: 0//スクロール位置を0にするアニメーションを実行
    }, 500);//ページトップスクロールの速さは0.5秒。
    return false;//リンク自体は無効化
});

（例）
$('.has-child').children('ul').css("display","block");//ulの子要素のうち.has-childがついたものをdisplay blockにする

（例）
$('#page-link a').click(function () {
	var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
	var pos = $(elmHash).offset().top;	//idの上部の距離を取得
	$('body,html').animate({scrollTop: pos}, 500); //取得した位置に0.5秒でスクロール
	return false;//リンク自体は無効化
});

（例）
$("#box").append('<ul class="pagination">');//#boxの中身の最後に<ul class="pagination">を追加

（例）
$(".navigation").appendTo(".wrapper") //navigationの内容全てをwrapperの中身の最後に追加

（例）var winw = $(window).width();//ウィンドウの横幅を取得してwinwという変数に格納する

（例）var winh = $(window).height();//ウィンドウの縦幅を取得してwinhという変数に格納する

（例）var headerH = $("#header").outerHeight(true);//headerの高さを取得してheaderHという変数に格納する

（例）var scroll = $(window).scrollTop(); //スクロール値を取得してscrollという変数に格納する

（例）
  var offsetTop = $('#area-2').offset().top;// #area-2のtopの位置を取得し、offsetTopという変数に格納する
  var offsetLeft = $('#area-2').offset().left;// #area-2のleftの位置を取得し、offsetLeftという変数に格納する

（例）var contentsTop = Math.round($('#area-3').offset().top);	//#area-3までの高さを四捨五入した値で取得してcontentsTopという変数に格納する

（例）var counter = $(".count-up").text();//.count-upのテキスト情報をcounterという変数に格納する

（例）$("input#join-btn").prop("disabled", true);//#join-btnがついたinputタグの操作を無効化する

（例）
var className = $(".sort-btn li").attr("class");　//.sort-btn liのクラス名を取得しclassNameという配列に格納する
className = className.split(' ');　//クラス名を分割して配列にする
$("."+className[0]).addClass("active");　//上記で取得した配列の0番目にactiveクラスを付与

（例）

  var headerH = $('#header').outerHeight(true); //ヘッダーの高さを取得
  var scroll = $(window).scrollTop(); //スクロール値を取得
  if (scroll >= headerH){//ヘッダーの高さ以上までスクロールしたら
      $('.openbtn').addClass('fadeDown');//.openbtnにfadeDownというクラス名を付与して
    }else{//それ以外は
      $('.openbtn').removeClass('fadeDown');//fadeDownというクラス名を除く
    }

（例）
//===== 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();/* アニメーション用の関数を呼ぶ*/
	});// ここまでページが読み込まれたらすぐに動く場合の記述

（例）
	var headerH = $("#header").outerHeight(true);//headerの高さを取得
	$(".scroll-point").each(function(i) {//.scroll-pointクラスがついたエリアからトップまでの距離を計算して設定
	elemTop[i] =Math.round(parseInt($(this).offset().top-headerH));//追従するheader分の高さ（70px）を引き小数点を四捨五入
});

（例）
$("#splash-logo").delay(1500).fadeOut('slow');//#splash-logoを1.5秒遅延させてフェードアウト

（例）
$('#page-top').click(function () {// #page-topをクリックしたら
    $('body,html').animate({//bodyとhtmlの
        scrollTop: 0//スクロール位置を0にするアニメーションを実行
    }, 500);//ページトップスクロールの速さは0.5秒。
    return false;//リンク自体は無効化
});

（例）
if (scroll >= 100){//上から100pxスクロールしたら
		$('#page-top').removeClass('DownMove');//#page-topについているDownMoveというクラス名を除く
		$('#page-top').addClass('UpMove');//#page-topにUpMoveというクラス名を付与
	}else{
		if($('#page-top').hasClass('UpMove')){//すでに#page-topにUpMoveというクラス名がついていたら
			$('#page-top').removeClass('UpMove');//UpMoveというクラス名を除き
			$('#page-top').addClass('DownMove');//DownMoveというクラス名を#page-topに付与
	}
}

（例）
function mediaQueriesWin(){ 
	var width = $(window).width();
	if(width <= 768) {
        $(".navi").addClass('active');//横幅が768px以下の場合 naviというクラスに activeを追加	
	}else{
	$(".navi").removeClass('active');//横幅が768pxより大きい場合 naviというクラスについている activeを削除	
	} 
}

// 画面がリサイズされたら動かす
$(window).resize(function() {
	mediaQueriesWin();/*関数を呼ぶ*/
});

// 画面が読み込まれたらすぐに動かす
$(window).on('load',function(){
	mediaQueriesWin();/*関数を呼ぶ*/
});

（例）
$(window).on('load', function () {//画面が読み込まれたら
    $('.tab li:first-of-type').addClass("active"); //.tabの最初のliに.activeを追加
})

（例）
function mediaQueriesWin(){ 
	var width = $(window).width();
	if(width <= 768) {
        $(".navi").addClass('active');//横幅が768px以下の場合 naviというクラスに activeを追加	
	}else{
	$(".navi").removeClass('active');//横幅が768px以上の場合 naviというクラスについている activeを削除	
	} 
}

// 画面がリサイズされたら動かす
$(window).resize(function() {
	mediaQueriesWin();/*関数を呼ぶ*/
});

（例）
$(window).scroll(function () {//画面がスクロールされたら
//ふわっと現れるCSSを実行する
　$('.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というクラス名を外す
		}
		});
})

（例）
$('#page-top').click(function () {// #page-topをクリックしたら
    $('body,html').animate({//bodyとhtmlの
        scrollTop: 0//スクロール位置を0にするアニメーションを実行
    }, 500);//ページトップスクロールの速さは0.5秒。
    return false;//リンク自体は無効化
});

（例）
$('.title').on('click', function() {//.titleをクリックしたら
	var findElm = $(this).next(".box");//.title直後の.boxを取得し
	$(findElm).slideToggle();//アコーディオンの上下動作 
	if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
		$(this).removeClass('close');//クラス名を除去し
	}else{//それ以外は
		$(this).addClass('close');//クラス名closeを付与
	}
});

（例）
$('.splashbg').on('animationend', function () {//splashbgのアニメーションが終了したら
//ふわっと現れるCSSを実行する
　$('.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というクラス名を外す
		}
		});
})

（例）
 setTimeout(function () {
    $("#splash-logo").fadeOut(1000);//#splash-logoが1秒かけてフェードアウトする動きを
 }, 1000);//1秒後に動かす