javascript - 向左+向右展开 DIV

Question

继另一个SO 问题之后。

是否可以向左和向右扩展 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'});