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; 

}