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.