ページ遷移の際、現在のページでアニメーションなど何らかの処理を施したい場合の 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 は過去記事にありますので、よかったらそちらもご参照ください↓
