左侧框的动画宽度

Question

我有一个div盒子

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

我可以轻松地向右侧设置其宽度的动画(左边缘将位于固定位置).
如何固定盒子的右边缘并将其宽度向左移动???
即盒子将向左侧扩展.

Answer 1

您可以通过同时为框的边距和宽度设置动画来实现.或者,如果您的盒子是绝对定位的,则同时为其左侧属性和宽度设置动画.

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});

你可以在这里看到它.