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

2019年8月3日 165次阅读

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

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

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

更新.一个人建议使用百分比值而不是动画的像素值.这工作 – 谢谢！有没有更好的方法让我坚持使用旧的基于像素的代码？

最佳答案 如果样式位置和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
});
点赞