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> 

私は #form_containerの NEW高さを取得していたときにしかし

、それはOLD高さを返します。今、このJavaScriptコードが正常に動作します

は... ...今私はこれがあると仮定していますなぜなら、新しい情報がブラウザにまだ描画されていないからです...どうして私はこれを克服するのですか？

Answer 1

私はあまりにも早く掲載

...

は何が起こっていることは、そのは、AJAXのフェッチが、そのは、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を使用してではなく、考えられているよう

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

だから、僕はAJAX呼び出しの内部でそのコードを置きますか？ slideUpとslideDownは内部的にその高さを計算します。

collapse_elem.slideDown(500);