Javascript动画滞后

Question

自从我2个月前开始研究网站开发以来，我遇到了类似的问题。 动画滞后。这是唯一的动画，有时它触发它的fps有点低。我不知道我做错了什么。

<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/

更新： 所以我发现了导致它的原因，它是我拥有的按钮数量。 这是它的样子。

侧边栏有一个启动动画的Windows 8，它是一个落后的动画。

当我在这里测试帧速率时，结果如下：

但是当我删除圆形按钮时：

这是我按钮的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;
}

有没有更好的方法，即使有这么多按钮，它也不会影响性能？

Answer 1

这有点晚了，但我设法通过使用跨度而不是按钮来显着减少fps下降。毕竟，大量的按钮使得它很麻烦。