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

Question

我有一个内容幻灯片:

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

这就像计算包装器的位置 X 和幻灯片的位置 X 一样简单，以确定将包装器滑动到哪里，以便下一张/上一张幻灯片显示在容器的视口(viewport)中。这很简单。

对于 Firefox 和 Chrome，我使用 CSS3 transform 和 transition-duration 来制作幻灯片动画。一切都很完美。差不多。

只有当我快速点击下一步按钮时才会出现问题。我正在使用 jQuery 的

$(selector).position().left

读取幻灯片的位置 X(左)，位置变为 0(而不是预期的 300 像素)。我确实有一个标志 isAnimating 来防止用户运行得太快，但这也无济于事。它确实可以防止滚动内容过快，但左侧位置可能仍为 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 

抱歉，我无法共享代码 - 剥离所有涉及的功能有点耗时。但如果有人有更好的答案，请告诉我。现在这对我来说很好。