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

你可以看到它in action here。

Answer 2

如果我正确地阅读了这个问题，那么你总是应用绝对位置，而不是使用left属性使用right属性来定位框然后设置宽度动画？

http://jsfiddle.net/nakYV/115/这样的事情。

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

并说您想要悬停动画，然后：

#thisToAnimate:hover { width: 300px; }

由于内容合理：将“框”弹性末端固定在右侧，然后将其悬停在左侧。

左侧框的动画宽度

3 个答案: