Javascript 闪烁的jquery动画

嘿，伙计们，我正在制作这个网站：（请记住，现在还很早，所以不要评判，耶呵呵）看看菜单。在firefox中，它可以正常工作，但在chrome和safari中，您可以看到在右角闪烁。我想发生的是盒子变大了。他们都是李的ul。以下是我的jquery：

    $(function()
    {
        $('#nav li').hover(function()
        {
            $(this).children().stop(true, true).fadeIn();
            $(this).stop().animate({
                  width: '90px'
            }, 300, 'swing');
            $(this).siblings().stop().animate({
                  width: '42px'
            }, 300, 'swing');
         }, function()
        {
            $(this).children().stop(true, true).fadeOut();
            $(this).stop().animate({
                  width: '50px'
            }, 200);
            $(this).siblings().stop().animate({
                  width: '50px'
            }, 200);
         });
    });

你知道我做错了什么，或者我如何改进这段代码吗

干杯

---

马特

我建议换一种灵活的盒子布局（CSS3）。你只需增加你想要的盒子的大小，其他盒子就会自行缩小

有很多flex box布局的示例（请看第二个示例）

将此css添加到菜单面板：

-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;

然后设置悬停元素的宽度。为了增加流动性，尝试添加一些像这样的轻微过渡延迟（为了便于阅读和理解，我将这些值分开）：

---

你的直觉是正确的。要使用浮动实现此效果，您需要自己处理动画并在一个步骤中调整所有LIs的大小，确保它们的宽度总和与包含的元素匹配。或者尝试使用绝对定位并自行处理偏移

---

。。或者你可以作弊，把整个东西放在一个容器div中，它的背景就是你使用的照片。那样的话，任何流血都会是照片的，而不是白色背景。

干杯谢谢heaps mate，我会尝试一下，看看结果如何哦，哇，我甚至从来没有见过这么多人。我可能应该熟悉可用的css3属性。谢谢你！你可以接受答案。这就是StackOverflow的工作原理：）

-moz-transition-property: width;
-moz-transition-duration: 0.2s;
-moz-transition-easing: ease-in-out;
-webkit-transition-property: width;
-webkit-transition-duration: 0.2s;
-webkit-transition-easing: ease-in-out;
transition-property: width;
transition-duration: 0.2s;
transition-easing: ease-in-out;