jQuery和CSS - 在动画时匹配div的高度

Question

我<div>在父母身边留下了两个人<div>.使用jQuery,div.will_slide_down将在某个时候向下滑动(使用$("div.will_slide_down").slideDown()).当它向下滑动时,其div.first高度也应该增加以同时匹配高度div.second.

我怎样才能做到这一点？

 <div class="wrap">
      <div class="first" style="width: 200px; float: left;"></div>
      <div class="second" style="width: 700px; float: left;">
           <p>BlaBlaBla</p>
           <div class="will_slide_down" style="display: none">Some hidden text</div>
      </div>
 </div>

我能想到的唯一方法是slideDown在div.second完成时运行一个函数,但这会弄乱布局.它应该同时发生.

Answer 1

我认为最好的方法是使用.animate()和step函数.在动画的每个"步骤"触发步进功能.像这样的东西应该做的伎俩:

$('div.will_slide_down').animate({height: 'show'}, {step: function(now, fx){
    var new_height = $('div.second').height;
    $('div.first').css('height', new_height);
}});