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的回调函数：

element.slideDown(1000, function() {
    var h = $(this).height();
    // Now do things with 'h'.
});

演示：http://jsfiddle.net/ambiguous/P47Cj/1/

Answer 2

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

如果你想在动画仍在运行时预测动画的最终高度，那么事情并不那么简单，因为AFAIK你只能访问已经由浏览器渲染的元素的计算高度，你无法读取高度未来效果图中的元素。但是如果你在滑动之前隐藏元素，也许你可以在隐藏它之前使用.height()将计算出的高度（.data()）附加到DOM元素，然后只需读取此值即可获得最后的高度。

编辑：

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

Answer 3

使用jQuery的高度函数。

element.height（）;

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

3 个答案: