jQueryでリンク先への遷移直前にいろんな機能をつけてみる
最終更新日: Update!!
aタグ要素をクリックするとhrefの値に入ったリンク先URLにページ遷移されますが、その直前にアニメーションや動きを入れるなど、何らかの機能を追加したいケースなどにjQueryを使って対応してみたいと思います。
aタグのリンクを無効にする
まずそのためにはaタグのリンクを無効にする必要があります。href="javascript:void(0)"という方法もありますが、今回は下記のようにpreventDefault()を使ってリンクを無効にしています。$("a").on('click',function(event){ event.preventDefault(); });このように一旦リンクを無効にするのですが、最終的にはリンク先へ遷移させるのでhrefの値は取得しておきます。そして、それに続けて遷移直前に実行させる内容を記述しておきます。 続いて、取得したリンク先に遷移させる関数も用意しておきます。また、ページ内アンカーリンクなど画面が遷移しない場合、この関数内にはリンク先へ移動直後に実行する内容も記述することができます。最後にその関数をsetTimeoutで一定時間後に実行させることでリンク先へ遷移直前に機能が実行することができます。このコードをまとめると下記のようになります。
$("a").on('click',function(event){ event.preventDefault(); var linkUrl = $(this).attr('href'); // ここにリンク先への遷移直前に実行する内容を記述 function action() { location.href = linkUrl; // ここにリンク先への移動直後に実行する内容を記述 (ページ内アンカーリンクなど画面が遷移しない場合に) } setTimeout(action,1000); });setTimeoutの数値はリンク先へ遷移直前に実行する機能の時間の長さによって調整します。あまり使うケースはないかもしれませんが、画面遷移にアプリのような動きの効果を付けれるかと思います。
sponserd
keyword search
recent posts
- Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
- メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
- webpack+Reactの環境にTailwindCSSを導入してみる
webpack+Reactの環境にTailwindCSSを導入してみる
- Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
- Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
- Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
- Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
categories