Z-Index Change Stack order FadeIn FadeOut
<p>I have tried to do this by myself but I can't quite get ti working the way I want it to. It suppose to re-order the stack of divs on the right fading out the current div and fading the next div on mouseover and mouseout on the menu. Here is my code it partly works. could someone help me out with this please. here it is on jsFiddle <a href="http://jsfiddle.net/FBLxT/" rel="nofollow">http://jsfiddle.net/FBLxT/</a>
if you moseover the menu back and forth the colors don't quite match up</p>

<pre><code>        (function ($) {
        $.fn.Menu = (function () {

            function rotateZindex(currentPanel) {
                var numOfPanels = $('#menu-container div').length;
                currentPanel = parseInt(currentPanel, 10) % numOfPanels;
                //alert(numOfPanels);
                $('#menu-container div').eq(currentPanel).fadeOut(function () {
                    $('#menu-container div').each(function (i) {
                        $(this).css({ 'z-index': ((numOfPanels - i) + currentPanel) % numOfPanels });

                    });
                    $(this).css({ 'visibility': 'visible' });
                    $(this).show();
                });
            }

            $(this).each(function () {
                $('.menu-item').each(function () {
                    $(this).mouseover(function () {
                        rotateZindex($(this).attr('rel'));
                    });

                });
            });

        });
    })(jQuery);

    $(document).ready(function () {
        $('.menu').Menu();

    });

&lt;style type="text/css"&gt;
    #menu-container {visibility:hidden}
&lt;/style&gt;

&lt;div&gt;
    &lt;table cellspacing="5"&gt;
        &lt;tr&gt;
            &lt;td valign="top"&gt;
                &lt;div class="RibbinMenu"&gt;Menu&lt;/div&gt;
                &lt;div class="menu" style="width:200px; margin-right:20px"&gt;
                    &lt;div class="menu-item" rel="1" style="height:30px; background:Aqua"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="2" style="height:30px; background:Blue"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="3" style="height:30px; background:Fuchsia"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="4" style="height:30px; background:Gray"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="5" style="height:30px; background:Green"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="6" style="height:30px; background:Lime"&gt;Some Text&lt;/div&gt;
                    &lt;div class="menu-item" rel="6" style="height:30px; background:Maroon"&gt;Some Text&lt;/div&gt;
                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td valign="top"&gt;
                &lt;div id="menu-container""&gt;
                    &lt;div id="1" 
                        style="width:200px; height:300px; margin-left:2px; border-left:1px solid #8a909a; background-color:Aqua; z-index:1"&gt;
                    &lt;/div&gt;
                    &lt;div id="2" 
                        style="width:180px; height:280px; margin-left:2px; border-left:1px solid #8a909a; background-color:Blue; z-index:2"&gt;
                    &lt;/div&gt;
                    &lt;div id="3" 
                        style="width:160px; height:260px; margin-left:2px; border-left:1px solid #8a909a; background-color:Fuchsia; z-index:3"&gt;
                    &lt;/div&gt;
                    &lt;div id="4" 
                        style="width:140px; height:240px; margin-left:2px; border-left:1px solid #8a909a; background-color:Gray; z-index:4"&gt;
                    &lt;/div&gt;
                    &lt;div id="5" 
                        style="width:120px; height:220px; margin-left:2px; border-left:1px solid #8a909a; background-color:Green; z-index:5"&gt;
                    &lt;/div&gt;
                    &lt;div id="6" 
                        style="width:100px; height:200px; margin-left:2px; border-left:1px solid #8a909a; background-color:Lime; z-index:6"&gt;
                    &lt;/div&gt;
                    &lt;div id="7" 
                        style="width:80px; height:180px; margin-left:2px; border-left:1px solid #8a909a; background-color:Maroon; z-index:7"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;           
&lt;/div&gt;
</code></pre>
