Question

在这个菜单中，de hovered div正在扩展，所有其他元素正在缩小

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

我见过这个：Expand div from the middle instead of just top and left using CSS 从中心扩展，他们也提到了摆动

有没有办法修复摆动？

这是我的代码

你可以看到速度总是一样的，所以理论上不应该摆动

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

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

动画扩展摆动

1 个答案: