动画扩大摆动答案

【问题标题】：animation expanding wiggle动画扩大摆动
【发布时间】：2023-03-26 06:10:01
【问题描述】：

在此菜单中，悬停的 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/

提前谢谢你

【问题讨论】：

请注意，如果您一次只移动两个元素，则不会出现摆动，因为它们的动画和大小将同步。我认为问题在于当您在三个或更多项目之间进行交换时，可能是由以下原因之一引起的：1) 多个动画在每一帧上都没有正确叠加 2) 帧和鼠标回调可能不是完美对齐，所以多个动画暂时不加起来。我对 jQuery 中的动画/鼠标甚至代码的工作方式并不十分熟悉，所以不确定它们能做出什么保证。
不幸的是，我认为最简单的保证解决方案是手动计算所有尺寸并自己为每个项目设置动画，然后将它们作为一个整体进行评估。其他任何事情都将依赖于完美的鼠标事件/动画同步。
其实一次不用考虑这两个元素。如果您将鼠标快速移入和移出单个项目的字段，也会发生这种情况。但我仍然认为手动计算所有位置，并将项目设置为“绝对”、“固定”或“相对”，而不是让布局引擎为您完成工作将是唯一确定的解决方案。

标签： jquery animation hover expand vibration

【解决方案1】：

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

【讨论】：