勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryのanimate()でページスクロール後に他の処理を実行させる方法

  jQuery JavaScript

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()で一瞬で要素を消すよりも滑らかな感じを受けた。

 - jQuery JavaScript

  関連記事

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法

jQueryで指定した要素のposition(leftやtop) / width ...