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()和阶跃函数。步骤函数在动画的每个“步骤”处触发。像这样的事情应该可以解决问题:

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