jQuery的$(selector).position().left有时在Firefox，Chrome浏览器中失败

Question

我有一个内容幻灯片：

幻灯片容器
|-->包装器
||幻灯片1、幻灯片2等

它的工作原理很简单，只需计算包装器的位置X和幻灯片的位置X，就可以确定下一张/上一张幻灯片在容器视口中显示的包装器的滑动位置。这是非常直接的。

对于Firefox和Chrome，我使用CSS3转换和过渡持续时间来制作幻灯片的动画。一切都很完美。几乎

问题是只有当我很快点击下一个按钮时。我正在使用jQuery的

$(selector).position().left

读取幻灯片的位置X(左)，位置变为0(而不是预期的，比如300px)。我确实有一个标志是动画，以防止用户过快，但这也没有帮助。它确实可以防止滚动内容过快，但左侧位置可能仍然是0，就好像其他原因导致它无法确定一样。

我做了一个简短的搜索，发现如果它是正在加载的图像，一些浏览器将无法确定它的位置，直到加载结束。然而，每张幻灯片都有一个图像，但在里面。幻灯片的CSS似乎把所有的宽度和边距都设置得很好。

问题是，根据我描述的场景，为什么会发生这种情况，以及可以改进什么来确定Firefox和Chrome浏览器的位置X？

Answer 1

我决定，如果offsetLeft在任何时候都不可靠，我可以使用元素的宽度及其在容器中的索引位置来计算位置X

var newWrapperPos = undefined;
$(lotWrapper).children('div').each(function(index){
if($(this).attr("id") === "slot"+id){
var width = $(this).width();
newWrapperPos = index * width;
return false;
}
}); 
//now I can shift wrapper to position = newWrapperPos 

很抱歉，我无法共享代码——剥离所有相关功能有点耗时。但如果有人有更好的答案，请告诉我。目前，这对我来说很好。