width and init problem
<p>I have created an animation chain I have two problems:</p>

<ol>
<li><p>The init function it doesn't set the width straight way for the first <code>div.container</code></p></li>
<li><p>On my mouseenter function where i have to use -10 for the <code>#menu</code> so the width doesn't expand out side the last <code>div.containers</code></p></li>
</ol>

<p>Here it is on <a href="http://jsfiddle.net/gygk7/3/" rel="nofollow">jsFiddle</a></p>

<p>JS:    </p>

<pre><code>$(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() });
        });
    });
</code></pre>

<p>CSS:</p>

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

<p>HTML:</p>

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

        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
