ホームページ > 記事 > ウェブフロントエンド > Jqueryのanimate()の応答が遅い問題を解決する
トップに戻るためのボタンは、ページをクリックすると自動的にWebページのトップに戻りますが、ハイパーリンクを使用することもできますが、瞬時にトップに戻る効果はあります。理想的ではありません。上向きスクロールは約 0.5 秒続きますが、これにはアニメーション効果を使用する必要があります。
私は jquery の animate() メソッドを使用することにしました。トップに戻る効果は完璧に達成されましたが、他の効果は理想的ではありませんでした。
「トップに戻る」ボタンの高さが画面の高さより低い場合は表示され、高さより高い場合は表示されることを望みます。CSS 属性「不透明度」を使用して制御しますが、毎回プルします。上まで引き上げてもボタンは消えず、最終的には消えて下に引っ張りましたが、ボタンは再び表示されませんでした。コードは次のとおりで、CSSコードはリストされていません。問題があったので、コードを 3 ~ 4 回確認しましたが、問題は見つかりませんでしたが、結果はエラーでした。グーグルで検索せずにはいられませんでした。答えはすぐに見つかりました
そうですね。スクロール中に常に発生するスクロール リスナーを呼び出していますが、スクロール リスナーを呼び出すとそれに関連してスクロールが遅いアニメーションも再生されます。スクロールすると、一度にすべてを再生しようとする複数のアニメーション呼び出しが作成されます (そのため、UI が遅くなります)。つまり、マウスを 1 回スクロールすると animate() メソッドの実行がトリガーされ、それぞれの実行に時間がかかります。私のコードでは、1 回の実行は 0.2 秒ですが、何度も実行されると、さまざまな animate() メソッドの遅延が発生します
<!--index.html--> <p class="sideBar"> <p class="goToTop"></p> </p>問題は解決しました! ! !
私は jquery の animate() メソッドを使用することにしました。トップに戻る効果は完璧に達成されましたが、他の効果は理想的ではありませんでした。 「トップに戻る」ボタンの高さが画面の高さより低い場合は表示され、高さより高い場合は表示されることを願っていますが、それを制御するにはCSSプロパティ「不透明度」を使用しますが、毎回プルします。上まで引き上げてもボタンは消えず、最終的には消えて下に引っ張りましたが、ボタンは再び表示されませんでした。コードは次のとおりで、CSSコードはリストされていません。問題があったので、コードを 3 ~ 4 回確認しましたが、問題は見つかりませんでしたが、後で実際に問題が発生したことがわかり、グーグルで調べたところ、すぐに答えが見つかりました JQuery の反応速度が遅いWeb ページにはトップに戻るボタンがなければ、ページをクリックすると自動的に Web ページのトップに戻りますが、即座にトップに戻る効果は理想的ではありません。スクロールは約 0.5 秒かかり、アニメーション効果を使用する必要があります。
そうですね。スクロール中に常に発生するスクロール リスナーを呼び出していますが、スクロールによってスクロール リスナーを呼び出すと、それに関連してスクロールが遅いアニメーションも再生されます。一度にすべてを再生しようとする複数のアニメーション呼び出しを作成します (そのため、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 サイトの他の関連記事を参照してください。