带有 CSS 布局/动画的 Chrome/jQuery 错误？解决方法？

Question

在 Chrome 中，元素的计算“top”属性可能与通过设置其样式指定的“top”属性不同。这导致我出现动画问题。似乎 jQuery animate 从查找当前 computed 样式开始，但它通过设置 specified 样式进行更新。

我想知道如何最好地解决这个问题。

我创建了一个 simple example 的问题。在 Firefox 中，在框中输入一个值，例如-500，然后单击 Go，它会为标尺的“顶部”属性设置动画，使指针指向 500。输入 499 并单击 Go，标尺几乎不会改变。现在在 Chrome 中尝试同样的操作，缩放设置为 83%。当你从 500 到 499 时，动画中会有一个大混蛋。这是因为 jQuery 是从 -416px 的计算顶部开始，然后将其动画到指定的 -499px 顶部。

更新。有人建议在动画中使用百分比值而不是像素值。那行得通-谢谢！有没有更好的方法让我坚持使用旧的基于像素的代码？

Answer 1

如果样式位置和jQuery计算的位置有差异，则让jQuery在开始之前计算起始位置，从而消除差异。假设您的样式表明元素位于：

.mydiv {top:120px;}

但是当您开始为 div 设置动画时，Chrome 会认为该元素位于 111px...

所以，让 jQuery 获得您的起点的顶部位置，然后从那里开始动画。

var thePosition = $('div.mydiv').offset();
var endLeft = thePosition.left - 500;
var endTop = thePosition.top - 500;
$(div.mydiv').animate({top : endTop, left : endLeft}, 'fast', function(){
    // do something on end
});