在jQuery效果(例如slideDown)之前确定元素包装器的最终大小

Determine final size of element wrapper before jQuery effect (e.g. slideDown)

本文关键字：包装 元素 效果 jQuery 例如 slideDown      更新时间：2023-09-26

谁能告诉我如果(以及如何)jQuery决定一个元素的最终大小，是动画与内置的效果函数，如slideDown() ?

给出一个实际的例子http://jsfiddle.net/GgCLa/:

CSS: 

#wrapper { display: block; }
#wrapper p {
     display: none;   
}
#wrapper p:first-child {
     display: block;   
}
HTML: 

<div id="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Curabitur et quam urna, ultrices commodo odio.</p>
    <p>Nulla at tellus augue, varius dignissim nunc. Donec mattis
       est quis sem iaculis scelerisque. .</p>
</div>
<input type="button" name="button" id="button" value="Clickey" />
JAVASCRIPT: 

$(document).ready(function() {
    $("input").toggle(
        function() { $("#wrapper p:last").slideDown("fast"); },
        function() { $("#wrapper p:last").slideUp("fast"); }
    );
});

是否有一种方法可以在动画完成之前确定包装器的最终高度?

在Anthony Jack的帮助下解决了这个问题。要在动画触发之前获得包装器的最终大小，包装器中包含的所有元素的高度需要像这样求和:

var calcHgt=0;
$("#wrapper *").each(function() {
   calcHgt+=$(this).height();
});

更新小提琴:http://jsfiddle.net/GgCLa/4/

. outerheight()和。height()似乎都返回元素的高度，即使该元素当前是隐藏的。

相关文章：