Question

虽然我在设置marginTop时以相同的速度使用jQuery动画两个框，但第二个框的移动速度比第一个框快。

<div id="box1" style="width:500px;height:80px;background-color:blue;">box 1</div>
<div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;">box 2</div>


<script type="text/javascript">
    jQuery("#box1").animate({marginTop:"-=80px"}, {duration: 1500});            
    jQuery("#box2").animate({marginTop:"-=80px"}, {duration: 1500});
</script>

然而，当我应用相同的设置Top时，两个盒子以相同的速度移动。

<div id="box1" style="width:500px;height:80px;background-color:blue;position:relative;">box 1</div>
<div id="box2" style="width:500px;height:80px;background-color:green;margin-left:510px;position:relative;">box 2</div>


<script type="text/javascript">
    jQuery("#box1").animate({top:"-=80px"}, {duration: 1500});          
    jQuery("#box2").animate({top:"-=80px"}, {duration: 1500});
</script>

知道为什么会这样发生吗？

Answer 1

您可以在this fiddle

中更清楚地看到效果

之所以发生这种情况，是因为您的第二个div低于第一个div。 margin属性与其周围的元素相关。顶部div将移动得更慢，因为上面的元素（在这种情况下是body）没有移动。但是你底部的div必须移动得更快才能保持margin属性相对于它上面的元素。换句话说，它想在动画结束后保持该属性。

在我的小提琴中，每个div都以margin-top: 100px开头。现在，当他们动画时，他们想要marginTop: "-=80px"，这意味着他们需要以margin-top: 20px结束。在顶部元素的情况下，它只需要向上移动80px，因为body没有移动。但是底部div需要移动80px PLUS顶部div移动的数量，这是另外80px，总共160px。 div需要在相同的时间内移动2倍像素，因此移动速度会更快。

我们可以进一步说明margin属性是来自this fiddle的相对属性。虽然我只是为顶部div设置动画，但底部div也在移动，因为它需要保持margin值一致。

你的第二段代码允许div以相同的速度移动的原因是因为top属性不是除了容器之外的任何元素的相对属性（正确的容器，很可能它不是它的直接容器），所以它们都会以相同的速度移动。

不确定这是否清楚。

Answer 2

如果您使用Firebug或Chrome检查绿色框，您会看到它的左边距已经在蓝框下方推动。它在技术上仍然与蓝色框一致，因此jQuery计算结束位置（与蓝色框一致）。它们就像你的第二个例子一样，在同一时间彼此相邻，但它看起来不同。在第二个示例中，它们看起来是内联的，因此看起来像是内联移动。无论如何，这就是我所观察到的。

动画jquery div的问题与不同的节奏

2 个答案: