在显示动画结束之前获取尺寸信息答案

【问题标题】：Getting size information before the end of a show animation在显示动画结束之前获取尺寸信息
【发布时间】：2011-02-15 23:04:52
【问题描述】：

当使用 jQuery.show() 时，有没有办法在动画发生之前访问有关显示元素的大小的信息？

*edit - 我想举个例子说明我打算在哪里使用它，因为任何不直接做我所要求的解决方法仍然非常有用：

使用 .show() 扩展灯箱内的内容，但灯箱的大小和位置必须等待动画结束后才能测量新尺寸和调整。结果是两个动画相互跟随，而我想要的是 2 个动画同时运行

【问题讨论】：

标签： jquery css animation show

【解决方案1】：

$("某个元素").css({ 显示：“块”，可见性：“隐藏”，位置：“绝对” });

将导致元素采用其自然大小但保持隐藏。然后，您可以使用 .height() 和 .width() 安全地测量元素的尺寸

希望对您有所帮助。

【讨论】：

这个，然后使用outerHeight和/或outerWidth
我会试一试的。听起来它应该可以工作，虽然我有点担心 position:absolute 的影响，特别是在 ie6 和 7 中，当使用 position:absolute 时浏览器对渲染元素的位置和大小的解释有时似乎会中断而不指定 left , 顶部等。
当元素不可见时不要太担心，您需要在之后覆盖这些样式或预先在 css 中设置它们。您可以使用多种方法来实现最终结果。

【解决方案2】：

您可以拥有以下内容：

$(document).ready(function() {
   var beforeHeight = $('#element').height();
   $('#element').animate({
      height:350
   },250, function() {
      var afterHeight = $('#element').height();
   });

   alert("Before: "+beforeHeight+" \r\n After: " + afterHeight);
});

只需重新阅读您的问题 - 如果您想要 2 个动画，一个接一个：

$('#element').animate({
    //animate stuff
},250,function() {
   $('#element').animate({
      //animate more stuff
   },250)
});

【讨论】：

【解决方案3】：

如果我正确理解了这个问题，下面应该这样做。

var height = $("#foo").height();

【讨论】：

问题是在动画之前 $("#foo").height() 经常（总是？）为 0，所以它不能很好地衡量动画之后的高度