开发者

Jquery layered animation slide out from under

开发者 https://www.devze.com 2023-03-18 07:50 出处:网络
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.

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.

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

but shows like this

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

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-si开发者_运维知识库ze: 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>

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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消