Question

嘿伙计们我正在制作这个网站：http://craigmarkdrums.com（记住它还很早，所以没有评判，是的，呵呵）并看一下菜单。在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);
         });
    });

任何想法我做错了什么，或者我如何改进这段代码？

欢呼声

马特

Answer 1

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

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

Answer 2

我建议转到灵活的盒子布局（CSS3）。你可以增加你想要的盒子的大小，其他人会自己缩小。

This page有很多flex-box布局的例子（看看第二个例子）

将此css添加到菜单面板：

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

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

-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;

闪烁的jquery动画

2 个答案: