jquery - 将盒子的宽度向左设置动画

Question

我有一个 div 框

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

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

Answer 1

您可以通过同时设置框的左边距和宽度的动画来实现。或者，如果您的框是绝对定位的，请同时为其 left 属性和宽度设置动画。

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

可以看到in action here .