展开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'});