宽度和init问题

Question

我已经创建了一个动画链我有两个问题：

1. 初始化函数不第一个div.container

2. 在我的mouseenter功能设置宽度直路在这里我不得不使用-10的#menu所以宽度不会扩展出方最后div.containers

这是jsFiddle个

JS：

$(document).ready(function() { 


     function init() { 
      $('#menu').css({ 'width': $('.container:first').width(), 'height': $('.container:first').height() }); 
     } 
     init(); 
     $('.menu-item').mouseover(function() { 
      var curr = $(this).closest('.container'); 
      var next = curr.next('.container'); 
      var index = curr.index() + 1 
      $('#menu').animate({ 'width': curr.position().left + curr.width() + next.width() - 9 /* don't know why i have to use -9*/ }) 
      .find('.container').css({ 'opacity': 0.5 }) 
      .filter('.container:nth-child(' + index + ')').nextAll().animate({ 'left': curr.position().left + curr.width() }); 
     }); 
    }); 

CSS：

.spacer 
    { 
     background-color:Red; width:5px; height:200px; position:absolute; z-index:1000; 
    } 

HTML：

<table border="2" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      <div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px "> 
       <div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua"> 
        <div class="menu-item">Menu Item 1</div> 
        <div class="menu-item">Menu Item 2</div> 
        <div class="menu-item">Menu Item 3</div> 
       </div> 
       <div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue"> 
        <div class="menu-item">Menu Item 4</div> 
        <div class="menu-item">Menu Item 5</div> 
        <div class="menu-item">Menu Item 6</div> 
       </div> 
       <div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia"> 
        <div class="menu-item">Menu Item 7</div> 
        <div class="menu-item">Menu Item 8</div> 
        <div class="menu-item">Menu Item 9</div> 
       </div> 
       <div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left"> 
        <div class="menu-item">Menu Item 10</div> 
        <div class="menu-item">Menu Item 11</div> 
        <div class="menu-item">Menu Item 12</div> 
       </div> 
       <div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left"> 
        <div class="menu-item">Menu Item 10</div> 
        <div class="menu-item">Menu Item 11</div> 
        <div class="menu-item">Menu Item 12</div> 
       </div> 
      </div> 

     </td> 
    </tr> 
</table> 

Answer 1

我不明白你的第一个问题，回答你的第二个问题是， -10应该是

$('#menu').position().left 

您需要考虑到菜单本身不适合屏幕边缘。