jQuery动画div显示完整的图像，重叠的内容，而不是将内容向下移动

Question

基本上我所拥有的是4个div，每一个都在设定的高度开始，当你将鼠标悬停在它们上面时，它们动画使得div高，背景图像，而不仅仅是最初显示的图像的潜行峰值。你可以在我在这里有我们来看一看：

http://jsfiddle.net/u2DK7/

基本上我想要它做的是，当你将鼠标悬停在其中一个箱子，它扩展在内容，而不是将其向下推。我尝试过简单的绝对定位，但似乎并不需要。

我想知道的另一件事是，是否有任何方法让动画指令工作一次。虽然来回徘徊，然后观看你排队的动画风格效果非常酷，但这并不是我想要的效果！

顺便说一句，我需要在html代码中保留的样式标签，所以我可以更改背景图片，而无需设置4个单独的div！

在此先感谢！

Answer 1

我选择绝对定位元素，并根据他们以前的兄弟从左侧计算他们需要的距离。

working jsFiddle here

jQuery的

$.each($('.fourboxes'), function(i,v){ 
    if(i == 0){ 
    $(v).css('left', '10px'); 
    }else{ 
    var prevDiv = $(this).prev('.fourboxes'); 
    var pWidth = prevDiv.width(); 
    var pleft = prevDiv.position().left; 
    $(v).css({'left' : pWidth + pleft + 10 +"px"}); 
    }   
}); 

的CSS

.fourboxes { 
    position:absolute; 
     left:10px; 
    height: 200px; 
    width: 139px; 
    border:1px solid red; 
    background-color:blue !important; 

}