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动画滞后

回答

相关问题