jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に特定の要素を非表示にしたいというケースがあった。「animate()→$('xxx').hide()」のように書くとほぼ同時に実行され、スクロールが無いままに要素が消えるという見た目になる。そのためanimate()が完了した後に別の処理を実行する方法をメモ。
対応方法
$('elem').animate({処理内容}, 400, function(){ animate()完了後に行う処理内容 });
上記のように記述することでanimate()完了後に処理が行われる。詳細はリファレンス参照。
サンプル
https://taitan916.info/sample/animate/
ページ下部にボタンがありクリックすることで、それぞれ異なる動作が確認できる。
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQueryのanimateのテスト</title> </head> <body id="top"> <div style="background-color: #f00; height: 500px"></div> <div style="background-color: #0f0; height: 500px"></div> <div style="background-color: #00f; height: 500px"></div> <input id="type-1" type="button" value="スクロールと同時にdiv要素削除"> <input id="type-2" type="button" value="スクロール後にdiv要素削除"> <input id="type-3" type="button" value="スクロール後にdiv要素をフェードアウト"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $('#type-1').on('click', function(){ $('html,body').animate({scrollTop:$(`#top`).offset().top}, 400); $(`div`).hide(); }); $('#type-2').on('click', function(){ $('html,body').animate({scrollTop:$(`#top`).offset().top}, 400, function(){ $(`div`).hide(); }); }); $('#type-3').on('click', function(){ $('html,body').animate({scrollTop:$(`#top`).offset().top}, 400, function(){ $(`div`).fadeOut('slow'); }); }); }); </script> </body> </html>
解説
「$('#type-1')」の処理は特に何も考えずに書いたパターン。スクロールと非表示処理が(見た目上では)ほぼ同時に実行されている。
「$('#type-2')」はanimate()でのスクロールが完了後にhide()が実行される。こちらでも悪くないんだけどスクロール完了直後にhide()が実行されるため、一瞬ページの表示が乱れるような感じを受けた。
「$('#type-3')」はanimate()でのスクロールが完了後にfadeOut()が実行される。hide()で一瞬で要素を消すよりも滑らかな感じを受けた。
関連記事
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...