jquery分层动画从下滑出

Question

这个 Jquery 动画可以正常工作，只不过被显示的隐藏元素会自动显示在另一个可见元素的顶部，而此时它应该只是从该元素下方滑出。

---
  |---------
  |        |
  |        |
  |        |
  |---------
---

但显示如下

---
---------
        |
        |
        |
---------
---

代码

Arial; writing-mode: tb-rl; filter: flipH flipV; z-index: 80;"> <b>x-buttons</b> </p>
  </div>

  <!-- div id="xbuttons" style="border: 2px solid #404040; font-family: Arial; font-size: 0.9em; background-color: grey; 

position:absolute; top: 400px; left:20px; height: 120px; visibility: hidden; margin: 0px 0px 0px 0px;" -->
  <div id="xbuttons" style="border: 2px solid #404040; font-family: Arial; font-size: 0.9em; background-color: grey; position:absolute; 

top: 400px; left:-50px; height: 120px; visibility: hidden; margin: 0px 0px 0px 0px; z-index:70;"> <!-- Begin div for xbuttons -->
     <ul style="list-style-type: none; padding: 10px 5px 5px 5px; margin: 0px 0px 0px 0px;">
     <li> <span id='clk1' class='clk'>paintAll()</span> </li>
     <li> <span id='clk2' class='clk'>showAll()</span> </li>
     <li> <span id='clk3' class='clk'>hideAll()</span> </li>
     <li> <span id='clk4' class='clk'>minimizeAll()</span> </li>
     <li> <span id='clk5' class='clk'>maximizeAll()</span> </li>
     <li> <span id='clk6' class='clk'>restoreAll()</span> </li>
     </ul>
  </div> <!-- End div for xbuttons -->

<script type='text/javascript'>
$(document).ready(function(){
      $("#xbox").toggle(function(){
            //Open menu          
            $("#xbuttons").stop().animate({ left: "+=74" }, 1200)
      }, function(){
            //Close menu
            $("#xbuttons").stop().animate({ left: "-=74" }, 1200) 
      });    

});
</script>

我为元素指定了 z 索引。这似乎没有任何效果。

Answer 1

点击此处进行简单演示！我相信对你来说，这很简单，因为你需要的唯一知识是 z-index 来实现你想要的。