Z-Index Change Stack order FadeIn FadeOut

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 http://jsfiddle.net/FBLxT/ if you moseover the menu back and forth the colors don't quite match up

        (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();

    });

<style type="text/css">
    #menu-container {visibility:hidden}
</style>

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

Your code was a bit messy, so I started from scratch, hopefully preserving the intended functionality.

In any case, I believe this version should provide you with a good place to achieve what you want.