请考虑以下情形:
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); }
在动画完成之前,请考虑单击此按钮.
解决方法
你什么时候需要最终高度?如果在动画完成后需要高度,则可以轻松地将回调函数作为第二个参数附加到.slideDown,该函数在动画完成后读取css属性(或$(this).height()).
如果你想在动画仍在运行时预测动画的最终高度,事情并不那么简单,因为AFAIK你只能访问已经由浏览器渲染的元素的计算高度,你将来无法读取元素的高度效果图.但是如果你在滑动之前隐藏元素,也许你可以在隐藏它之前使用.data()将计算出的高度(.height())附加到DOM-Element,然后只需读取此值即可获得最终结果高度.
编辑:
实际上,事情可能非常简单:在开始动画之前(但在隐藏它之后)使用css(‘height’)读取元素的高度并使用数据存储值:在这里查看示例:http://jsfiddle.net/QNDcv/