Jquery layered animation slide out from under
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.
精彩评论