任何人都可以解释为什么这个 jQuery.offset() 每次使用时都会发生变化吗？

Question

谁能给我解释一下这里发生了什么？

我正在尝试使用 jQuery 使页面上的向导元素居中。第一次在元素上调用 showCentered() 时，它在页面上正确居中并且一切看起来都很好。然而，第二次元素被移到一边（也不是之前值的两倍）。

所以第一次调用它就可以正常工作。第二次（和第三次，.. 等）它被移离页面越来越远。

示例代码：

function showCentered(selector){
          d         = $(selector);
            h       = d.outerHeight();
            w       = d.outerWidth();
            hMax    = $(window).height();
            wMax    = $(window).width();

            _top    = (hMax / 2) - (h / 2);
            _left   = (wMax / 2) - (w / 2);

            if (_left < 0) _left = 0;
            if (_top < 0) _top = 0;

            d.offset({
                top:    _top,
                left:   _left
            });

        d.show();
}

//1st time, OK 
$('.demo').hide();
showCentered('.demo');

//2nd time, NOT OK
$('.demo').hide();
showCentered('.demo');

这是上面的工作演示：Codepen.io

当为 .demo 元素运行上述函数时，我得到以下 h、w、hMax、wMax、_top、_left 的值，然后是 offset().top、offset().left。注意第二次偏移值是如何变化的。

另外值得注意的是，这将影响任何在第一次之后使用偏移量的元素。

谁能解释为什么每次使用后偏移都会发生变化？

Answer 1

您无法可靠地获取隐藏元素的尺寸。

见jQuery outerHeight for hidden element

jQuery 尝试进行补偿，但有时您仍然会得到不正确的值。见jQuery: height()/width() and "display:none"

编辑：实际上真正的问题是 $.offset() 不能用于正确设置隐藏元素的位置。它尝试根据元素相对于其偏移父元素的当前位置进行计算，如果元素被隐藏，这些计算就是错误的。只需将 d.show(); 移动到设置偏移量之前即可解决问题。