javascript/jQuery在绘制之前获取元素高度？

Question

我知道这个问题似乎不可能。但我相信有人可以帮助我！

我有一个带有选项和按钮的div，用户选择一个选项并单击“下一步”按钮。

我想要发生的是，带有选项的div需要动画到0px高度，使用ajax加载新内容，然后div需要重新动画到内容的新高度......

所以基本上div在缩小，然后在增长，但是在这之间，innerHtml正在改变！

代码中，我至今是：

function load_form(form_name){ 
    var form_cont_elem = $("#form_container"); 
    var collapse_elem = $("#collapsable"); 

    // animate collapsable div to 0, callback ajax fetch 
    collapse_elem.animate({height: "0px"}, 500, function(){ 

     $.get('/ajax/contact_form/' + form_name + '.html', function(data){ 
      // hide form container 
      form_cont_elem.css({display: ""}); 
      // load data into form container 
      form_cont_elem.html(data); 
     }); 

    }); 

    // get new height of form 
    var height_var = form_cont_elem.outerHeight(); 
    // remove display:none 
    form_cont_elem.css({display: ""}); 
    // re-animate collapsable div to new height 
    collapse_elem.animate({height: height_var}, 500); 

} 

的前按一下按钮是：

<div id="collapsable"> 
    <div id="form_container"> 
     <p>What is the Nature of your Question?</p> 
     <hr /> 
     <ul> 
      <li><a>Quote</a></li> 
      <li><a>Feedback</a></li> 
      <li><a>Enquiry</a></li> 
      <li><a>Complaint</a></li> 
     </ul> 
     <button class="blue">Next</button> 
     <div class="clear"></div> 
    </div> 
</div> 

按钮点击后的HTML是：

<div id="collapsable"> 
    <div id="form_container"> 
     <form method="post" action="/php/mailer.php"> 
      <fieldset> 
       <input type="hidden" name="quote" /> 
       <label>Name</label> 
       <input type="text" name="name" size="30" maxlength="30" /> 
       <label>Telephone Contact</label> 
       <input type="text" name="telephone" size="30" maxlength="30" /> 
       <label>Email Address</label> 
       <input type="text" name="email" size="30" maxlength="100" /> 
       <input class="orange" type="submit" name="submit" value="submit!" /> 
      </fieldset> 
     </form> 
    </div> 
</div> 

现在这段JavaScript代码工作正常...

然而，当我得到#form_container的NEW高度时，返回OLD高度......现在我假定这是因为新的信息还没有在浏览器中绘制出来...所以我如何克服这个问题？

Answer 1

我贴得太早......

这是怎么回事，它的获取阿贾克斯，但同时它的等待Ajax响应，其运行下面的代码！的：

var height_var = form_cont_elem.outerHeight(); 
form_cont_elem.css({display: ""}); 
collapse_elem.animate({height: height_var}, 500); 

所以我只是把这些代码Ajax调用内，像这样

var form_elem = $("#form_container"); 
var coll_elem = $("#collapsable"); 

coll_elem.animate({height: "0px"}, 500, function(){ 
    $.get('/ajax/contact_form/' + form_name.toLowerCase() + '.html', function(data){ 
     form_elem.css({display: "none"}); 
     form_elem.html(data); 

     var height_var = form_elem.outerHeight(); 
     $("#collapsable").animate({height: height_var}, 500); 
     form_elem.css({display: ""}); 
    }); 
}); 

Answer 2

你有没有考虑过使用slideUp和slideDown而不是手动动画到一个特定的高度？ slideUp和slideDown在内部为您计算该高度。

collapse_elem.slideDown(500);