閃爍的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;