CSS属性margin-top：使用Jquery的-10px动画会影响下面的div，我该如何修复它们？

我想制作一个悬停效果来反弹一个图标，但在下面有一个固定的阴影。所以我使用Jquery悬停和动画边缘顶部。发生了什么情况：图像块在更改边缘顶部时拖动阴影如何修复阴影位置？CSS属性margin-top：使用Jquery的-10px动画会影响下面的div，我该如何修复它们？

这里是我的代码

<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" 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> 

</ul>

enter image description here

我已经发现，通过在动画中加入高度

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);

它的工作原理，但..原来的高度以某种方式修改...它不是原始的因此修改了阴影的原始位置...在一次盘旋之后...

来源

2011-10-05 PartySoft

你试过设置下边距或填充，底部或顶部图像等于你移动了DIV了多少？ –