闪烁的jquery动画

Question

嘿家伙我正在制作这个网站的过程如下：http://craigmarkdrums.com（裸露在脑后，它仍然很早，所以没有判断，是的，呵呵）并看看菜单。在Firefox中，它可以正常工作，但在Chrome和Safari浏览器中，您可以在右手边看到闪烁。我认为发生的是盒子尺寸的变化。他们都是李先生。这里是我的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有很大的弹性盒布局的例子（看看第二个例子）

添加这个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;