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

Firefox中的非平滑div动画

1 个答案: