展開DIV左+右

Question

從另一個SO question.

繼上是否有可能擴大DIV，左，右，而不是在其他的答案SO質疑只擴大到向右和向下...

乾杯

Answer 1

當然是。

結構

您需要設置爲position: relative;父容器和你的實際DIV設置爲position: absolute;

這樣你就可以修改你的DIV的位置沒有任何後顧之憂。這應該作爲一個起點。與父母相比，您可以看到子div被向左和向右移動。

<style> 
    .parent { 
     position: relative; 
     width: 200px; 
     height: 200px; 
     background: yellow; 
     margin: 40; 
    } 
    .child { 
     position: absolute; 
     top: -10px; 
     left: -10px; 
     width: 100px; 
     height: 100px; 
     background: red; 

    } 
</style> 

<div class="parent"> 
    <div class="child"> 

    </div> 
</div> 

擴展

所以實際膨脹，你將不得不動畫/與框的寬度和高度一起改變左/頂部位置。

對於每1px您左移的方塊，您必須將其寬度增加2px！以獲得更大的擴張。

$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});