动画扩展摆动

Question

在这个菜单中，悬停的 div 正在扩展，所有其他元素都在缩小

，更改大小时菜单右侧有一个小摆动，这真的很烦人，

我见过这个： 使用 CSS 从中间展开 div，而不是仅从顶部和左侧展开< /a> 从中心扩展，他们还提到了摆动，

有没有办法修复摆动？

这是我的代码

，您可以看到速度始终相同，因此理论上不应该有晃动，

function add() {
    var speed = 50;
    $('.space').hover(
        function() {
            var n = this.id.replace(/[^\d]/g, '');
            $('#space_' + n).removeClass('contract');
            $('#space_' + n).stop().animate({
                height: "107px",
                width: "107px",
            }, speed, 'linear');
            $('.contract').stop().animate({
                height: "73px",
                width: "70px",
            }, speed, 'linear');
        },
        function() {
            var n = this.id.replace(/[^\d]/g, '');
            $('#space_' + n).addClass('contract');
            if($('#space_' + n).hasClass('selected') != true) {
                $('#space_' + n).stop().animate({
                    height: "73px",
                    width: "73px",
                }, speed, 'linear');
            }
            $('.contract').stop().animate({
                height: "73px",
                width: "73px",
            }, speed, 'linear');
        }
    );
}

add();

您可以在这里看到菜单的示例： http://mellroy.com/dean/

提前谢谢您

Answer 1

摆脱边框 - 而是使用背景图像。如果将整个菜单放在白色和黑色背景上（与菜单匹配），您将不会看到摆动 - 尽管摆动仍然存在。我怀疑你能否避免它。