左侧框的动画宽度

Question

I have a div box

<div style="width: 400px; height: 400px; position: absolute; left: 350px; top: 350px; background-color: #cdcdcd;"></div>

i can easily animate its width towards right side (left edge will be on fixed position).
How to fix the right edge of the box and animate its width towards left???
ie box will expand towards left side.

Answer 1

You can do it by animating the box's margin-left and width at the same time. Alternatively, if your box is absolutely positioned, animate it's left property and width at the same time.

HTML

<div id="loading"></div>

CSS

#loading {
   margin-left: 200px;
   width: 0;
   height: 10px;
   background: red;
}

jQuery

$('#loading').animate({width: 200, marginLeft: 0}, {duration: 1000});

You can see it in action here .

Answer 2

If I'm reading the question right, then you anyways have position absolute applied so rather than using left property use right property to position the box and then animate the width?

http://jsfiddle.net/nakYV/115/ something like this.

Answer 3

<div class="thisIsContainer"> <div id="thisToAnimate"></div></div>

.thisIsContainer { width: 300px; display: flex; justify-content: flex-end; }
#thisToAnimate { width: 200px; transition linear width 0.3s;} 

and lets say You would like an animation on hover then:

#thisToAnimate:hover { width: 300px; }

Due to justify-content: flex-end our 'box' will stick to right, then on hover it will expand to left.