On one of my pages I have used jquery to animate a navbar button when it is hovered over, however, when i do so it pushes the div below it out of the way and messes up the layout - is it possible to allow the button to animate and intersect the div without moving or affecting its layout?
http://www.omnicraftservers.com/images/problem.png
I am fairly new to web design in general so I may be making some huge mistakes here - please point them out!
The jquery for the list element:
<script>
$(document).ready(function()
{
$("ul li").mouseenter(function()
{
$(this).animate({height:'100px',opacity:'1'},200);
});
$("ul li").mouseleave(function()
{
$(this).animate({height:'110px',opacity:'0.9'},100);
$(this).animate({height:'30px',opacity:'0.9'},200);
});
});
</script>
the css for the list element:
ul li
{
clear:right;
position:relative;
float:left;
width:100px;
height:auto;
display:inline-block;
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.4)));
border:1px solid rgba(0, 0, 0, 0.5);
border-bottom-left-radius:11px;
border-bottom-right-radius:11px;
text-align:center;
text-shadow: 1px 1px rgba(0,0,0,0.9);
font-family: 'Abril Fatface', cursive;
font-size: 20px;
z-index:20;
}
and, if this helps, the css for the problematic outer div element:
.panel
{
position:relative;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,0.7)), color-stop(100%,rgba(0,0,0,0.8)));
border:1px solid rgba(0, 0, 0, 0.5);
width:1148px;
height:185px;
border-radius:11px;
padding:10px;
z-index:0;
}
Hope this is enough information for a viable answer - any help would really be appreciated!