JQuery:element - 在动画期间获取最终的css值

Question

请考虑以下情形:

element.css({display:'none'});
element.slideDown(1000);
// ...
// here I want to get the final height

什么是在动画完成之前获取动画的最终值的正确方法？如果我直接访问css属性,我会得到当前值.我简化了上面的案例.实际的代码没有绑定在同一个函数中,因此我不能只创建一个变量来保存该值以供我稍后引用.

提前致谢.

编辑:

我想我无法很好地表达我想要做的事情.我的问题,修改:

element.css({display:'none'});
element.slideDown(1000);

btn.click(function() {
    var finalHeight = element..?
    var str = 'height of the element will be ' + finalHeight;
    str += ' when the animation is complete';
    alert(str);
}

在动画完成之前,请考虑单击此按钮.

Answer 1

什么时候需要最终高度？如果动画完成后需要高度，您可以轻松附加一个回调函数作为第二个参数，该函数在动画完成后.slideDown读取 css 属性（或）。$(this).height()

如果您想在动画仍在运行时预测动画的最终高度，事情就没那么简单了，因为据我所知，您只能访问浏览器已渲染的元素的计算高度，而您将来无法读取元素的高度效果图。但是，如果您在滑入元素之前隐藏该元素，也许您可​​以在隐藏它之前将计算出的高度 ( .height()) 附加到 DOM 元素.data()，然后只需读取该值即可获取最终高度。

编辑：

实际上，事情可能非常简单：只需在开始动画css('height') 之前data（但在隐藏它之后）读取元素的高度并使用存储值：在这里查看示例： http: //jsfiddle.net/QNDcv/