Эта анимация 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-index для элементов. Это, кажется, не имеет никакого эффекта.