jQuery分层动画从下面滑出 [英] Jquery layered animation slide out from under

问题描述

此Jquery动画的工作原理是，当露出的隐藏元素只是应从该元素下方滑出时，它会自动显示在另一个可见元素的顶部.

This Jquery animation works except that the hidden element being revealed is automatically shown on top of the other visible element when it should just slide out from under that element.

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

但显示如下

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

代码

Code

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-index.这似乎没有任何作用.

I specified a z-index for the elements. This doesn't seem to have any effect.

推荐答案

单击此处进行简单操作示范！我可以为您确定，这很简单，因为您需要的唯一知识就是z-index才能完成您想要的东西.

Click here for a simple demonstration! I'm sure for you, it's something simple, because the only piece of knowledge you need is z-index in order to accomplish want you want.

这篇关于jQuery分层动画从下面滑出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！