Firefox 中的非平滑 div 动画

Question

参考this fiddle。该动画在 Chrome 和 IE (v9) 上非常流畅，但在 Firefox 上却非常不稳定。整个想法是在不移动 div 本身的情况下为边框设置动画（参考this 问题）。问题是，在 Firefox 中以更流畅的方式（如 Chrome/IE 中的方式）实现相同动画的任何可能方法？

即使您只为div 的一侧设置动画也是如此，所以这并不是因为我们试图同时为每一侧设置动画。如果我们在 Firefox 中查看this fiddle，似乎动画的边距不太平滑，这似乎是问题所在。

感谢任何锻炼。

Answer 1

我认为主要问题是您指定了这么多属性，并且动画函数可能认为它有 8 个不同的东西可以同时进行动画处理，而不仅仅是可以表示为的两个属性。例如，您可以这样指定，将 8 个参数组合为 2 个。我也不确定负边距：

$("#thumbdiv").bind({
            mouseenter: function(){
                $(this).animate({
                    'border-width': "35px",
                    'margin': "10px"},
                    200, 'linear');
            },
            mouseleave: function(){
                $(this).animate({
                    'border-width': "20px",
                     'margin': "0px"},
                    200, 'linear');
            }
        });