Résoudre le problème de la réponse lente de l'animate() de Jquery

Le bouton qui remonte en haut est indispensable dans une page web. Cliquer sur la page retournera automatiquement en haut de la page web. Vous pouvez utiliser le lien hypertexte. pour obtenir l'effet de revenir instantanément au sommet, ce n'est vraiment pas idéal. Un meilleur effet consiste à faire défiler vers le haut pendant environ 0,5 seconde, ce qui nécessite l'utilisation d'effets d'animation.

J'ai choisi d'utiliser la méthode animate() de jquery, et l'effet de retour au sommet a été parfaitement obtenu, mais l'autre effet n'était pas idéal.

J'espère que la hauteur du bouton de retour en haut disparaîtra lorsqu'elle est inférieure à la hauteur de l'écran et apparaîtra lorsqu'elle est supérieure à sa hauteur. J'utilise l'attribut CSS 'opacité' pour le contrôler, mais. il sera tiré vers le haut à chaque fois. Le bouton ne disparaît toujours pas. Après avoir finalement disparu, le bouton n'apparaît plus lorsque je le tire vers le bas. Le code est le suivant et le code CSS n'est pas répertorié :

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

Il y a toujours eu un problème, et j'ai vérifié le code trois ou quatre fois, aucun problème n'a été trouvé à chaque fois, mais le résultat était une erreur. mais recherchez-le sur Google, et j'ai trouvé la réponse immédiatement

• StackOverflow : Jquery temps de réaction lent

eh bien... vous appelez l'écouteur de défilement qui se produit à chaque instant pendant que vous faites défiler mais vous jouez également une animation qui est relativement lente à défiler lorsque vous appelez l'écouteur de défilement en faisant défiler, vous créez plusieurs appels d'animation qui tentent de jouer. tout à la fois (et c'est pourquoi cela ralentit l'interface utilisateur). en exécutant différentes méthodes animate()

Solution

Une solution serait d'appeler .stop()

avant

vous appelez .animate

C'est ainsi que vous modifiez la méthode animate() :

Problème résolu ! ! !

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

Un bouton de retour en haut est indispensable dans une page Web. Cliquer sur la page reviendra automatiquement en haut de la page Web. Vous pouvez utiliser des hyperliens, mais l'effet de retour. vers le haut instantanément n'est pas très bon. Idéalement, le meilleur effet est de faire défiler vers le haut pendant environ 0,5 seconde, ce qui nécessite l'utilisation d'effets d'animation.

J'ai choisi d'utiliser la méthode animate() de jquery, et l'effet de retour au sommet a été parfaitement obtenu, mais l'autre effet n'était pas idéal.

J'espère que la hauteur du bouton de retour en haut disparaîtra lorsqu'elle est inférieure à la hauteur de l'écran et apparaîtra lorsqu'elle est supérieure à sa hauteur. J'utilise l'attribut CSS 'opacité' pour le contrôler, mais. il sera tiré vers le haut à chaque fois. Le bouton ne disparaît toujours pas. Après avoir finalement disparu, le bouton n'apparaît plus lorsque je le tire vers le bas. Le code est le suivant et le code CSS n'est pas répertorié :

Il y a toujours eu un problème, et j'ai vérifié le code trois ou quatre fois, aucun problème n'a été trouvé à chaque fois, mais le résultat était une erreur. recherchez-le sur Google, et j'ai trouvé la réponse d'un seul coup

<!--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 temps de réaction lent

eh bien... vous appelez l'écouteur de défilement qui se produit à chaque instant pendant que vous faites défiler mais vous jouez également une animation qui est relativement lente à défiler lorsque vous appelez l'écouteur de défilement en faisant défiler, vous créez plusieurs appels d'animation qui tentent de jouer tous en même temps (et c'est le cas). pourquoi cela ralentit l'interface utilisateur). Chaque exécution prend du temps. Pour mon code, une exécution dure 0,2 s. Bien qu'une exécution ne soit pas longue, plusieurs fois se superposent, ce qui entraîne un retard dans l'exécution des différentes méthodes animate()

.

Solution

• Une solution serait d'appeler .stop() avant d'appeler .animate

Ceci est comment modifier animate ()Méthode :

Problème résolu ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!