JavaScriptの動作の起点に使えるjQueryの基本コード８選【コピペで使えます】

2021年11月16日2021年11月28日

CSSを基本からしっかり学びたい場合は「 CSS設計完全ガイド」がオススメです。

詳細解説だけでなく、実践的モジュールが数多く詰まっており、CSS設計の考え方と実践法が身につきます。

JavaScriptの動作の起点に使えるjQueryの基本コード８選


//画面ロード時に実行
$(function() {
  SlideAnime();
});

See the Pen 練習 by 説也 (@setsunaru_com) on CodePen.

※ 読込と一緒にコンテンツがスライド表示されます


// 画面ロード完了時に実行
$(window).on("load", function() {
  // 実行させたいJavaScriptコード
});

※ 読込が完了するとコンテンツがスライド表示されます


//画面スクロール時に実行
$(window).on("scroll", function() {
  SlideAnime();
});

※ スクロールするとコンテンツがスライド表示されます


//コンテンツクリック時に実行
$(".Target").on("click", function() {
  SlideAnime1();
});

※ テキストをクリックすると、コンテンツがスライドアウトします


//マウスカーソルが乗った時に実行
$(".Target").on("mouseenter", function() {
  SlideAnime();
});

※ テキストにマウスをのせた時、コンテンツがスライドアウトします


//マウスカーソルが外れた時に実行
$(".Target").on("mouseenter", function() {
  SlideAnime();
});

※ テキストにカーソルをのせた後に、カーソルを外した時、コンテンツがスライドアウトします


//マウスを動かしたとき実行
$(".Target").on("mousemove", function() {
  SlideAnime();
});

※ ウィンドウ内でカーソルを移動したときに、コンテンツがスライドアウトします。


//画面がリサイズされたとき実行
$(window).on("resize", function() {
  SlideAnime();
});