animate width of a box towards left

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???
i.e. 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.