展開四面八方

Question

箱，我有以下結構：

我的目標是當用戶將鼠標放置的箱子，就應該擴大和走在別人沒有打破UI。所以基本上這個盒子應該在每個指令中擴展20px，而其他每個元素都保持在同一個地方。請注意，我不知道這些框的確切大小，因爲它們是負責任的。

我定位的箱子是這樣的：

#holder { 
    width: 250px; 
    background-color: #FFCCCC; 
    overflow: hidden; 
    padding: 15px; 
} 

.box { 
    width: 45%; 
    height: 50px; 
    border: 1px grey solid; 
    float: left; 
    margin-bottom: 15px; 
} 

.box:nth-child(odd) { 
    float: right; 
} 

與下面的HTML：

<div id="holder"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

而且我處理使用jQuery的事件。

$(document).ready(function(){ 
$(".box").mouseenter(function(){ 
     var _this = $(this); 
     var newWidth = parseInt(_this.css("width")) + 40, 
      newHeight = parseInt(_this.css("height")) + 40; 

    _this. 
     css("z-index", 99). 
     animate({ 
      width: newWidth + "px", 
      height: newHeight + "px", 
      marginTop: "-20px", 
      marginLeft: "-20px" 
     }, 1000); 
}); 

$(".box").mouseleave(function(){ 
     var _this = $(this); 
     var newWidth = parseInt(_this.css("width")) - 40, 
      newHeight = parseInt(_this.css("height")) - 40; 

    _this. 
    css("z-index", 1). 
    animate({ 
     width: newWidth + "px", 
     height: newHeight + "px", 
     marginTop: "0px", 
     marginLeft: "0px" 
    }, 1000); 
}); 
}); 

這裏是小提琴：http://jsfiddle.net/3T89h/

Answer 1

我能想到的最簡單方法是絕對定位（雖然有可能是一個更整潔的方式）。

你需要申請

position:absolute; 

每個箱子，給它一個固定的高度/寬度（百分比就沒有真正的工作），並手動位置，例如

http://jsfiddle.net/3T89h/1/

編輯：

如果您的箱子需要響應，有未定的高度寬度，那麼仍然可以用類似的方法來做到這一點。

您可以使用原盒容器，用

position:relative; 

，然後在其中保持你的實際內容which'll被絕對定位，這裏有一個例子：

http://jsfiddle.net/3T89h/2/

所以基本上你現在有一個盒子作爲一個響應包裝器，它包含一個具有所需效果的內盒，它與包裝器的尺寸相匹配。該設計可以再發生巨大變化，但你想要的JavaScript效果不會被改變，例如：http://jsfiddle.net/3T89h/3/