Jquery的animate()反應過慢的問題解決

一張網頁中少不了回到頂部的按鈕，點擊頁面會自動回到網頁頂部，可以使用超連結的方式，但是瞬間就回到頂部的效果實在不太理想，比較好的效果是向上滾動持續約0.5秒，這就需要用到動畫效果了。

我選擇使用jquery的animate()方法，回到頂部效果完美實現，但是另外的一個效果卻不太理想。

我希望回到頂部按鈕的高度在小於螢幕高度時消失，在大於其高度時在顯現出來，使用css  屬性'opacity'來控制，但是每一次都是往上拉到頂部了按鈕還是不消失，好不容易消失了再拉到底部按鈕又不出現，程式碼如下，css程式碼就不列出來了：

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

一直有問題，程式碼查了三四遍都沒發現問題，但效果就是出錯，後來實在沒辦法去google了一下，一下子就找到了答案

• #StackOverflow：Jquery slow reaction time

well.. you are calling the scroll 列表, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).

#就是說，滑鼠滾動一次就引發一次animate()方法的執行，而每次執行是需要時間的，對於我的程式碼是一次執行0.2s，雖然一次時間不長，但是好多好多次疊加在一起就造成了執行不同animate()方法的延時

• 解決方法

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

也就是這樣修改animate()方法：

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

問題解決！ ！ ！

一張網頁中少不了回到頂部的按鈕，點擊頁面會自動回到網頁頂部，可以使用超連結的方式，但是瞬間就回到頂部的效果實在不太理想，比較好的效果是向上滾動持續約0.5秒，這就需要用到動畫效果了。

我選擇使用jquery的animate()方法，回到頂部效果完美實現，但另外的一個效果卻不太理想。

我希望回到頂部按鈕的高度在小於螢幕高度時消失，在大於其高度時在顯現出來，使用css  屬性'opacity'來控制，但是每一次都是往上拉到頂部了按鈕還是不消失，好不容易消失了再拉到底部按鈕又不出現，程式碼如下，css程式碼就不列出來了：

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

一直有問題，程式碼查了三四遍都沒發現問題，但效果就是出錯，後來實在沒辦法去google了一下，一下子就找到了答案

• #StackOverflow：Jquery slow reaction time

#well.. you are calling the scroll listener which occurs evry moment while you are scrolling。 try to play all at once (and that is why it slows down the ui).

就是說，滑鼠滾動一次就引發一次animate()方法的執行，而每次執行是需要時間的，對於我的程式碼是一次執行0.2s，雖然一次時間不長，但是好多好多次疊加在一起就造成了執行不同animate()方法的延時

• 解決方法

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

也就是這樣修改animate()方法：

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

問題解決！ ！ ！

以上是Jquery的animate()反應過慢的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！