【jQuery】リンク先への遷移直前に処理を実行

ページ遷移の際、現在のページでアニメーションなど何らかの処理を施したい場合の jQuery をメモ。

【jQuery】リンク先への遷移直前に処理を実行

順番的には

  • aタグをクリックする
  • aタグのリンクを一旦無効にする
  • リンク先のhrefを取得する
  • 遷移直前に実行させる処理(アニメーションなど)
  • 一定時間後に取得したリンク先に遷移させる

って感じですね。

$("a").on('click', function(event) {
    event.preventDefault();
    let getUrl = $(this).attr('href');

    // 遷移直前に実行したい処理をココに記述
  
    function transition() {
      location.href = getUrl;
    }

    setTimeout(transition,1000);
  });

感覚としては、setTimeout で指定する時間が⑤にあたるので、その時間内にアニメーションを加える感じですかね。

preventDefault や location は過去記事にありますので、よかったらそちらもご参照ください↓

JavaScript 初心者にはコチラが分かりやすかったです▼