Jqueryのanimate()の応答が遅い問題を解決する

トップに戻るためのボタンは、ページをクリックすると自動的にWebページのトップに戻りますが、ハイパーリンクを使用することもできますが、瞬時にトップに戻る効果はあります。理想的ではありません。上向きスクロールは約 0.5 秒続きますが、これにはアニメーション効果を使用する必要があります。

私は jquery の animate() メソッドを使用することにしました。トップに戻る効果は完璧に達成されましたが、他の効果は理想的ではありませんでした。

「トップに戻る」ボタンの高さが画面の高さより低い場合は表示され、高さより高い場合は表示されることを望みます。CSS 属性「不透明度」を使用して制御しますが、毎回プルします。上まで引き上げてもボタンは消えず、最終的には消えて下に引っ張りましたが、ボタンは再び表示されませんでした。コードは次のとおりで、CSSコードはリストされていません。問題があったので、コードを 3 ～ 4 回確認しましたが、問題は見つかりませんでしたが、結果はエラーでした。グーグルで検索せずにはいられませんでした。答えはすぐに見つかりました

スタック
• オーバーフロー

  : Jquery の反応時間が遅い

そうですね。スクロール中に常に発生するスクロール リスナーを呼び出していますが、スクロール リスナーを呼び出すとそれに関連してスクロールが遅いアニメーションも再生されます。スクロールすると、一度にすべてを再生しようとする複数のアニメーション呼び出しが作成されます (そのため、UI が遅くなります)。

つまり、マウスを 1 回スクロールすると animate() メソッドの実行がトリガーされ、それぞれの実行に時間がかかります。私のコードでは、1 回の実行は 0.2 秒ですが、何度も実行されると、さまざまな animate() メソッドの遅延が発生します

解決策の 1 つは、次のとおりです。 .animate を呼び出す前に .stop() を呼び出してください

• これは animate() メソッドを変更する方法です:

<!--index.html-->
    <p class="sideBar">
        <p class="goToTop"></p>
    </p>

問題は解決しました! ！ ！

Web ページにはトップに戻るボタンがなければ、ページをクリックすると自動的に Web ページのトップに戻りますが、即座にトップに戻る効果は理想的ではありません。スクロールは約 0.5 秒かかり、アニメーション効果を使用する必要があります。

私は jquery の animate() メソッドを使用することにしました。トップに戻る効果は完璧に達成されましたが、他の効果は理想的ではありませんでした。

「トップに戻る」ボタンの高さが画面の高さより低い場合は表示され、高さより高い場合は表示されることを願っていますが、それを制御するにはCSSプロパティ「不透明度」を使用しますが、毎回プルします。上まで引き上げてもボタンは消えず、最終的には消えて下に引っ張りましたが、ボタンは再び表示されませんでした。コードは次のとおりで、CSSコードはリストされていません。問題があったので、コードを 3 ～ 4 回確認しましたが、問題は見つかりませんでしたが、後で実際に問題が発生したことがわかり、グーグルで調べたところ、すぐに答えが見つかりました

JQuery の反応速度が遅い

そうですね。スクロール中に常に発生するスクロール リスナーを呼び出していますが、スクロールによってスクロール リスナーを呼び出すと、それに関連してスクロールが遅いアニメーションも再生されます。一度にすべてを再生しようとする複数のアニメーション呼び出しを作成します (そのため、UI が遅くなります)。

つまり、マウスのスクロールです。 animate() メソッドの実行は 1 回トリガーされ、それぞれの実行に時間がかかります。私のコードでは、一度に0.2秒間実行されますが、1回の時間は長くはありませんが、多くの時間が重なって、animate()メソッドの遅延が異なる実行になります

• 解決策

1つの解決策は次のとおりです。 .animate を呼び出す前に .stop() を呼び出す

これで animate() メソッドが変更されます:

//回到顶部
    $(".goToTop").on("click",function(){
        $("html,body").animate({scrollTop:0},'slow');
    });// 控制按钮是否消失
    $(function(){
        var windowHeight = window.innerHeight;        var $goToTop;
        $(window).scroll(function(){
            $goToTop = $(".goToTop");           if(windowHeight < $goToTop.offset().top){
            $goToTop.animate({opacity : 1},200);
        }else{
            $goToTop.animate({opacity : 0},200);
            }
        });
    });

• 問題は解決しました! ！ ！

以上がJqueryのanimate()の応答が遅い問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。