Lösung des Problems der langsamen Reaktion von Jquerys animate()

Die Schaltfläche, die zum Anfang führt, ist auf einer Webseite unverzichtbar. Durch Klicken auf die Seite gelangen Sie automatisch zum Anfang der Webseite. Sie können den Hyperlink verwenden Um den Effekt einer sofortigen Rückkehr nach oben zu erzielen, ist es wirklich nicht ideal, etwa 0,5 Sekunden lang nach oben zu scrollen, was den Einsatz von Animationseffekten erfordert.

Ich habe mich für die animate()-Methode von jquery entschieden und der Effekt der Rückkehr nach oben wurde perfekt erreicht, aber der andere Effekt war nicht ideal.

Ich hoffe, dass die Höhe der Schaltfläche „Zurück nach oben“ verschwindet, wenn sie kleiner als die Bildschirmhöhe ist, und angezeigt wird, wenn sie größer als ihre Höhe ist. Ich verwende das CSS-Attribut „Opacity“, um sie zu steuern, aber Die Schaltfläche wird jedes Mal nach oben gezogen. Nachdem sie schließlich verschwunden ist, wird sie nicht wieder angezeigt. Der Code lautet wie folgt und der CSS-Code ist nicht aufgeführt.

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

//回到顶部
    $(".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);
            }
        });
    });

Es gab immer ein Problem und ich habe den Code drei- oder viermal überprüft. Es wurde immer kein Problem gefunden, aber das Ergebnis war ein Fehler. Dann konnte ich nicht helfen aber googeln Sie es und ich habe die Antwort sofort gefunden

• StackOverflow: Jquery langsame Reaktionszeit

Nun... Sie rufen den Scroll-Listener auf, der jeden Moment beim Scrollen auftritt, aber Sie spielen auch eine Animation ab, deren Scrollen relativ langsam ist. Wenn Sie den Scroll-Listener durch Scrollen aufrufen, erstellen Sie mehrere Animationsaufrufe, die versucht werden, abzuspielen Alle auf einmal (und das ist der Grund, warum es die Benutzeroberfläche verlangsamt) und jede Ausführung dauert bei meinem Code 0,2 Sekunden. Obwohl ein Mal nicht lange dauert, verursachen viele Male eine Verzögerung beim Ausführen verschiedener animate()-Methoden

Lösung

Eine Lösung wäre, .stop()

vorher< aufzurufen 🎜>Sie rufen .animate auf

So modifizieren Sie die animate()-Methode:

Problem gelöst! ! !

    //在animate()方法之前添加stop()函数
    $goToTop.stop().animate({opacity : 1},200);

Eine Schaltfläche „Zurück zum Anfang“ ist auf einer Webseite unverzichtbar. Wenn Sie auf die Seite klicken, kehren Sie automatisch zum Anfang der Webseite zurück Es ist nicht sehr gut, sofort nach oben zu scrollen. Der bessere Effekt besteht darin, etwa 0,5 Sekunden lang nach oben zu scrollen, was den Einsatz von Animationseffekten erfordert.

Ich habe mich für die animate()-Methode von jquery entschieden und der Effekt der Rückkehr nach oben wurde perfekt erreicht, aber der andere Effekt war nicht ideal.

Ich hoffe, dass die Höhe der Schaltfläche „Zurück nach oben“ verschwindet, wenn sie kleiner als die Bildschirmhöhe ist, und angezeigt wird, wenn sie größer als ihre Höhe ist. Ich verwende das CSS-Attribut „Opacity“, um sie zu steuern, aber Die Schaltfläche wird jedes Mal nach oben gezogen. Nachdem sie schließlich verschwunden ist, wird sie nicht wieder angezeigt. Der Code lautet wie folgt und der CSS-Code ist nicht aufgeführt.

Es gab immer ein Problem und ich habe den Code jedes Mal drei- oder viermal überprüft, aber das Ergebnis war ein Fehler google es und ich habe die Antwort auf einmal gefunden

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

//回到顶部
    $(".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);
            }
        });
    });

StackOverflow: Jquery langsame Reaktionszeit

• naja... du rufst an der Scroll-Listener, der jeden Moment beim Scrollen auftritt, aber Sie spielen auch eine Animation ab, deren Scrollen relativ langsam ist. Wenn Sie den Scroll-Listener durch Scrollen aufrufen, erstellen Sie mehrere Animationsaufrufe, die versuchen, alle auf einmal abzuspielen Warum es die Benutzeroberfläche verlangsamt. Bei meinem Code dauert eine Ausführung 0,2 Sekunden, aber viele Male überlagern sich, was zu einer Verzögerung bei der Ausführung verschiedener animate()-Methoden führt

Lösung

Eine Lösung wäre, .stop() aufzurufen, bevor Sie .animate aufrufen

• Dies ist, wie man animate ()Methode ändert:

Problem gelöst! ! !

Das obige ist der detaillierte Inhalt vonLösung des Problems der langsamen Reaktion von Jquerys animate(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!