ホームページ >ウェブフロントエンド >jsチュートリアル >Jqueryのanimate()の応答が遅い問題を解決する

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

巴扎黑
巴扎黑オリジナル
2017-06-30 11:22:352182ブラウズ

トップに戻るためのボタンは、ページをクリックすると自動的に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},&#39;slow&#39;);
        });// 控制按钮是否消失
        $(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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。