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-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>
I specified a z-index for the elements. This doesn't seem to have any effect.
