position divs dynamically on mouseenter [fixed]
<p>What im trying to do is dynamically add a div between each sliding panel that slides out horizontally. </p>

<p>I have condition(statement) which is commented on the mouseenter function. it's ment to position the div.spacer between each div.container but it changes each time you mouseenter a menu item can somebody please correct this if you can, here is a working sample on <a href="http://jsfiddle.net/WeYuM/" rel="nofollow">jsFiddle</a> i have figured it out here it is on <a href="http://jsfiddle.net/WeYuM/2/" rel="nofollow">jsFiddle
</a> 
JavaScript:</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

            $(this).addClass('menuitem-over');

            if (curr.index() == $('.container').length - 1) return;

            $('#menu').animate({ 'width': curr.position().left + curr.width() + 5 + next.width() - $('#menu').position().left })
            .find('.container:nth-child(' + index + ')').nextAll()
            .animate({ 'left': curr.position().left + curr.width() + 5 })
            /* this condition works except for positioning the divs.spacer correctly */
            if ($('#spacer' + curr.index()).length &gt; 0) {
                return
            } else {
                $('#menu').append(
                    $('&lt;div id="spacer' + curr.index() + '" class="spacer"&gt;&lt;/div&gt;').css({'left': curr.position().left + curr.width()})
                    )
            }

        }).mouseleave(function () {
            $(this).removeClass('menuitem-over');
        });
    });
</code></pre>

<p>CSS:</p>

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

<p>HTML:</p>

<pre><code>&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div id="menu" style="background-color:Black"&gt;
                &lt;div class="container" id="1" style="width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua; opacity:.5"&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="width:200px; height:300px; z-index:998; position:absolute; background-color:Blue; opacity:.5"&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="width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia; opacity:.5"&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="width:200px; height:500px; z-index:996; position:absolute; background-color:Green; opacity:.5"&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="width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; opacity:.5"&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>
