Question

我试过自己这样做，但我不能按照我想要的方式工作。它假设重新排序右边的div堆栈淡出当前div并在菜单上的mouseover和mouseout上淡化下一个div。这是我的代码部分工作。请有人帮我解决这个问题。这里是jsFiddle http://jsfiddle.net/FBLxT/ 如果您前后移动菜单颜色不匹配

        (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>                
            </td>
        </tr>
    </table>           
</div>

Answer 1

你的代码有点混乱，所以我从头开始，希望保留预期的功能。

无论如何，我相信this version应该为你提供一个实现你想要的好地方。

Z-Index更改堆栈顺序FadeIn FadeOut

1 个答案: