Z-Index更改堆棧順序FadeIn FadeOut

Question

我試圖自己做這件事，但我無法完全按照我希望的方式工作。它假設重新排列右邊的div堆棧淡出當前div，並在菜單上的mouseover和mouseout上淡化下一個div。這是我的代碼部分工作。請有人幫我解決這個問題。這裏是上的jsfiddle http://jsfiddle.net/FBLxT/ 如果moseover菜單來回顏色不太匹配

 (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應該爲您提供一個很好的地方來實現你想要的。