Javascript動畫滯後

自從我2個月前開始學習網絡開發以來，我遇到了類似的問題。動畫滯後。這是唯一的動畫，有時它觸發它的fps有點低。我不知道我做錯了什麼。Javascript動畫滯後

<script type="text/javascript"> 
    function showSidebar(){ 
     $("#sidebar").stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 1000); 
     $("#sidebar-ctn").delay(100).stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 900); 
    } 
    function hideSidebar(){ 
     $("#sidebar").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 500); 
     $("#sidebar-ctn").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 400); 
    } 
    </script>

我想有一些錯誤的，因爲我沒有經歷過FPS滴（我不知道什麼是正確的術語，只是動畫滯後），在其他網站上有這麼多的動畫是這樣的： http://sarasoueidan.com/demos/windows8-animations/

更新：所以我發現是什麼導致它，它是我有的按鈕的數量。下面是它的樣子。 enter image description here

側邊欄有一個Windows 8的靈感動畫，這是一個滯後的。

當我測試它在這裏的幀率是結果：

，但是當我刪除了圓形按鈕： enter image description here

下面是我的按鈕的CSS：

#tables button{ 
    font-size: 1.5em; 
    color: white; 
    border: none; 
    outline: none; 

    width: 105px; 
    padding: 5px; 
    margin: 10px; 
    height: 70px; 

    text-shadow: 2px 2px 5px rgba(120,155,179,0.5); 
    cursor: pointer; 
    -moz-border-radius:100px; 
    -webkit-border-radius: 100px; 
    border-radius: 50%; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -o-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
}

有這樣做的更好方式，即使有這麼多按鈕，它也不會影響性能？

來源

2014-04-05 Damathryx

你能提供一個jsfiddle嗎？你確定這是使頁面滯後的動畫，而不是頁面上的其他任何東西？！無論如何，jQuery動畫是衆所周知的相當'慢' –

即使我面對問題時，瀏覽器的負載非常高，並且計算機的圖形性能很低。這只是正常.. :) –

你鏈接到一個演示顯式有一個教程的鏈接，爲什麼不先閱讀教程？因爲它看起來並不像你看過的那樣。 – mpm

這是比較晚，但我設法通過使用跨度而不是按鈕顯着減少fps下降。畢竟這是大量的按鈕，使得它很麻煩。

來源

2014-07-02 18:51:32 Damathryx

Javascript動畫滯後

回答

相關問題