CSS property margin-top:-10px animation with Jquery affects the following divs, how can I make them fixed?

I want to make a hover effect to bounce an icon but to have a fixed shadow below. So i'm using Jquery with hover and animating the margin-top. what happends that the image block drags the shadow when it changes it's margin-top How can I fix the shadow in it's position?

here's my code

<style>
#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}
#icons li
{
float: left;
height: 170px;
padding: 10px 0px 0px 0px;
}
#icons li a.img_bounce
{
display: block;
border: 0px;
}

#icons li img.img_shadow
{
display: block;
border: 0px;

}


</style>

<script>
 jQuery(document).ready(function () {

jQuery("#icons a.img_bounce").hover(function(){
jQuery(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
},function(){
jQuery(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
});


});
</script>

<ul id="icons">
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" s开发者_如何学Ctyle="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>

</ul>

I've found out that by adding on the animation a height

on hover
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:138}, 400);
on hover out
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:128}, 400);

it works but.. the original height is somehow modified...it's not the original so modifies the original position of the shadow...after one hover...

A really quick solution for this would be to add some padding/margin to the bottom at the same time. What is happening just now is that because you are moving one element using the margin, then the other elements are just going to move with it as they are relatively positioned to it.

If you add in the extra padding/margin at the bottom (one or the other) then the shadow image should stay in the same position.

I think this might be helpful to you.

Site: http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/

Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/

On a side note: Is that icon "ChromeFox" or something?

You can simply add position: relative to #icons li a.img_bounce, and then animate the top property instead of margin-top.

See: http://jsfiddle.net/thirtydot/uexTM/