jQueryの記事一覧｜あめぞう

Javascript jQuery 2026.4.25

slick.jsで逆回転するバグの解決方法

useTransform: false,

jQuery 2026.4.13

slick.jsスライダーの高さが計算できないため直下の要素に影響が出てしまう

#slider {
	.images {
		display: flex;
	}
}

CSS jQuery 2025.6.30

slick.jsの暴走を防ぐ？

.slick-slider div {
    transition: none;
}

.slick-slide {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

jQuery 2025.4.2

slickスライダーが全てを読み込みまで高速スライドする件

.slick-slider {
    visibility: hidden;
}

$(document).ready(function() {
    $('.slider').on('init', function(event, slick) {
        $('.slick-slider').css('visibility', 'visible');
    }).slick({
        autoplay: true,
    });
});

jQuery 2024.3.27

別ページへのアンカーリンクがうまくいかない

遷移先ページへ以下を記述する

$(window).load(function () {
  var lochref = window.location.href;
  if (lochref.indexOf("#") > -1) {
    var anchor = lochref.slice(lochref.indexOf("#"));
    window.setTimeout(function () {
      $("body, html").animate(
        {
          scrollTop: $(anchor).offset().top,
        },
        1
      );
    }, 1);
  }
});

jQuery 2024.3.13

よくある質問

/* ===============================================
  # faq
  =============================================== */

jQuery(function ($) {
  $(".question").on("click", function () {
    /*クリックでコンテンツを開閉*/
    $(this).next().slideToggle(200);
    /*矢印の向きを変更*/
    $(this).toggleClass("open", 200);
  });
});

/* ===============================================
  # faq 排他処理
  =============================================== */

$(function() {
		$('.question').click(function() {
			$(this).toggleClass('open');
			$(this).next().slideToggle();
			$('.question').not($(this)).next().slideUp();
			$('.question').not($(this)).removeClass('open');
		});
	});

HTML jQuery 2023.11.7

form送信後ページ内スクロール

&lt;script>
  $(document).ready(function () {
    $('form').attr('action', function (i, val) {
      return val + '#section';
    });
  });
&lt;/script>

jQuery 2023.10.29

100vhスクロールしたらclass付与

$(window).scroll(function() {
        var height = $(window).height();
        if ($(window).scrollTop() > height) {
            $('header').addClass('is-show');
        } else {
            $('header').removeClass('is-show');
        }
    });

jQuery WordPress 2023.5.11

MW WP FORMでページ下部にフォームを付けた場合のページ遷移

<script>
jQuery(function($) {
	if ($('.error')[0] || $('.mw_wp_form_confirm')[0] || $('.mw_wp_form_complete')[0]) {
		$("body").addClass("mw_wp_form_dn");
	}
	const email01 = $('input:text[name="email"]').val();
	if (typeof email01 !== "undefined") {
		$("body").addClass("mw_wp_form_dn");
	}
});
</script>

CSS HTML jQuery 2023.5.8

タブ

HTML

<div class="tab-group">
    <div class="tab-area">
        <div class="tab active">
            タブ１
        </div>
        <div class="tab">
            タブ２
        </div>
        <div class="tab">
            タブ３
        </div>
    </div>
    <div class="content-area">
        <div class="content show">
            タブ１コンテンツ
        </div>
        <div class="content">
            タブ２コンテンツ
        </div>
        <div class="content">
            タブ３コンテンツ
        </div>
    </div>
</div>

SCSS

.tab-group {
    .tab-area {
        display: flex;

        .tab {
            align-items: center;
            border: 1px solid #000;
            color: #000;
            cursor: pointer;
            display: flex;
            justify-content: center;
        }

        .tab.active {
            background-color: #000;
            color: #fff;
        }
    }

    .content-area {
        .content {
            display: none;
        }

        .content.show {
            display: block;
        }
    }
}

jQuery

$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});

jQuery

slick.jsで逆回転するバグの解決方法

slick.jsスライダーの高さが計算できないため直下の要素に影響が出てしまう

slick.jsの暴走を防ぐ？

slickスライダーが全てを読み込みまで高速スライドする件

別ページへのアンカーリンクがうまくいかない

よくある質問

form送信後ページ内スクロール

100vhスクロールしたらclass付与

MW WP FORMでページ下部にフォームを付けた場合のページ遷移

タブ

HTML

SCSS

jQuery

Category

Recent posts

Category