Solving the problem of slow response of Jquery's animate()

The button that goes back to the top is indispensable in a web page. Clicking on the page will automatically return to the top of the web page. You can use the hyperlink method, but the effect of returning to the top instantly It's really not ideal. A better effect is to scroll upward for about 0.5 seconds, which requires the use of animation effects.

I chose to use jquery's animate() method, and the effect of returning to the top was perfectly achieved, but the other effect was not ideal.

I hope that the height of the back to top button will disappear when it is less than the screen height and appear when it is greater than its height. I use the css attribute 'opacity' to control it, but it will be pulled up to the top every time. The button still does not disappear. After finally disappearing, the button does not appear again after pulling it to the bottom. The code is as follows, and the css code is not listed:

<!--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);
            }
        });
    });

There has always been a problem. I checked the code three or four times and found no problem. , but the result was an error. Then I couldn't help but google it, and I found the answer all at once

• StackOverflow：Jquery slow reaction time

well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling , you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).

That is to say, each mouse scroll triggers the execution of the animate() method. Each execution takes time. For my code, one execution is 0.2s. Although one time is not long, many times superimposed together cause a delay in executing different animate() methods

• Solution

One solution would be to call .stop() before you call .animate

This is how the animate() method is modified:

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

Problem solved! ! !

There is a back to the top button that is indispensable in a web page. Clicking on the page will automatically return to the top of the web page. You can use hyperlinks, but the effect of returning to the top instantly is not very good. Ideally, the better effect is to scroll upward for about 0.5 seconds, which requires the use of animation effects.

I chose to use jquery's animate() method, and the effect of returning to the top was perfectly achieved, but the other effect was not ideal.

I hope that the height of the back to top button will disappear when it is less than the screen height and appear when it is greater than its height. I use the css attribute 'opacity' to control it, but it will be pulled up to the top every time. The button still does not disappear. After finally disappearing, the button does not appear again after pulling it to the bottom. The code is as follows, and the css code is not listed:

<!--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);
            }
        });
    });

There has always been a problem. I checked the code three or four times and found no problem. , but the result was an error. Then I couldn't help but google it, and I found the answer all at once

• StackOverflow: Jquery slow reaction time

well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).

That is to say, rolling the mouse once triggers the execution of the animate() method, and each execution takes time Yes, my code is executed for 0.2s at a time. Although the time is not long, many times superimposed together cause a delay in executing different animate() methods.

• Solution Method

One solution would be to call .stop() before you call .animate

This is how to modify the animate() method:

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

Problem solved! ! !

The above is the detailed content of Solving the problem of slow response of Jquery's animate(). For more information, please follow other related articles on the PHP Chinese website!