Развернуть DIV левый + правый

Question

Вслед за другой SO question.

Можно ли расширить DIV, влево и вправо вместо ответов на другой SO вопрос, который только расширить вправо и вниз ...

веселит

Answer 1

конечно, есть.

Структура

Вам нужно установить в position: relative; родительский контейнер и ваш фактический набор дел до 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 вы меняете коробку влево, вам нужно увеличить ее ширину на 2 пикселя! чтобы получить четное расширение.

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