隐藏的div高度(改变我的建议)

Question

好的,我在这里回答某人的问题,关于为什么他们的剧本不起作用.他们将内容加载到隐藏的div中,然后获得高度,以便他们可以为包装div设置动画.但我总是试着测试我提供的代码.所以我做了这个演示来向他们证明.

那么,嗯,我进入了暮光之城还是我现在正在做梦？捏自己!

我在Firefox,IE和Chrome中尝试了这个演示,两种方法都返回相同的值.Firebug说零!我重新启动了我的计算机,我甚至更改了代码(删除了高度函数)并尝试使用jQuery 1.3.2并且它仍然有效!我知道的隐藏要素USED回到零值.即使这个SO答案也给出了我的建议!

所以我想我的问题是......我错过了什么或者我们给出了不好的建议吗？

Answer 1

查看jQuery 1.4.2和1.3.2源代码,它实际上在您调用width()或height()隐藏元素时自动执行此操作.它设置以下属性:

{ position: "absolute", visibility: "hidden", display:"block" }

然后它获取宽度/高度,并恢复属性的旧值.

所以没有必要自己更改属性--jQuery会为你处理它.

<编辑>
这将允许您获取隐藏元素的尺寸.但是,当元素包含在另一个隐藏元素中时,它将无法工作 - 您将获得高度为0.在这种情况下,您需要另一个解决方案,可能就像这个答案.
</编辑>

以下是1.4.2源代码的相关位:

cssShow = { position: "absolute", visibility: "hidden", display:"block" },

//[undocumented jQuery.css function which is called by .height() and .width()]
css: function( elem, name, force, extra ) {
    if ( name === "width" || name === "height" ) {
        var val, props = cssShow, ....

        function getWH() {
            ... this function gets the actual width/height into the variable val
        }

        if ( elem.offsetWidth !== 0 ) {
            getWH();
        } else {
            jQuery.swap( elem, props, getWH );
        }

        return Math.max(0, Math.round(val));
    }
    return jQuery.curCSS( elem, name, force );
},

// A method for quickly swapping in/out CSS properties to get correct calculations
swap: function( elem, options, callback ) {
    var old = {};

    // Remember the old values, and insert the new ones
    for ( var name in options ) {
        old[ name ] = elem.style[ name ];
        elem.style[ name ] = options[ name ];
    }

    callback.call( elem );

    // Revert the old values
    for ( var name in options ) {
        elem.style[ name ] = old[ name ];
    }
}