メモ：jQueryあれこれ

html、cssは省略します

WordPressの時

jQuery(function($){
 //ここに色々書く。$(function(){ はダメ
});

ページを読み込んだら、ってわざわざ言いたい時

window.addEventListener('DOMContentLoaded', function(){
// ここに書く。$(function(){　}); だとエラーが出た時、これで直ったことがある
});

スムーススクロール（スムーズスクロール）？

$('a[href^="#"]').click(function(){
    var adjust = -60;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
});

スクロールすると出現する「トップに戻るボタン」

var topBtn = $('#go2top');    
    topBtn.hide();
$(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
});

続きを読むボタン

親要素の高さで指定するver.

.hiddenwrap を position:relative overflow:hiddenにする
.onhiddenがついてる時、高さをpx指定する

$('.showmore').click(function(){
		$(this).parent('.hiddenwrap').toggleClass('onhidden');
		$(this).toggleClass('btnclose');
});

前の要素全部隠すver.

$('.showmore2').click(function(){
	$(this).prev().slideToggle();
	$(this).toggleClass('btnclose');
});

ハンバーガーメニュー

$("#nav-open").on("click", function() {
        $(this).toggleClass("active");
        $(this).next().slideToggle();
    });
$('#nav-content li a').click(function() {
        $("#nav-content").hide();
	$('#nav-open').removeClass("active");
});
$('#nav-drawer').click(function() {
	event.stopPropagation();
});

最後のは親要素 #nav-drawer にかけるおまじない。
イベントを途中で止める効果がある

クリックしたあと、一定の時間をあけて複数の処理を順に行う

$('.class').click(function(){
		$(this)処理A;
		 setTimeout(() => {
		 	$(this).処理B;
		},1000);
});

下の記事でダサいとか問題ありと言われているが、取り急ぎ…
liginc.co.jp