javascript - DIV を左右に展開

Question

別のSOの質問に続きます。

右と下にのみ展開する他のSOの質問の回答の代わりに、左右のdivを展開することは可能ですか...

乾杯

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>

拡張

したがって、実際の拡張では、ボックスの幅と高さとともに左/上の位置をアニメーション化/変更する必要があります。

ボックスを左に 1 ピクセル移動するごとに、幅を 2 ​​ピクセル増やす必要があります。均一な拡張を得るために。

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