jQuery & CSS - match a div's height while animating

I have two <div>'s floated left within a parent <div>. 开发者_如何转开发Using jQuery, the div.will_slide_down will slide down at some point (using $("div.will_slide_down").slideDown()). When it is sliding down, the div.first's height should also increase to match the height of the div.second at the same time.

How can I do that?

 <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>

The only way I can think of is to run a function when the slideDown of the div.second is complete, but this will mess up the layout. It should happen at the same time.

I think the best way would be to use .animate() and the step function. The step function is fired at each 'step' of the animation. Something like this should do the trick:

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

Assuming your slide down will be triggered by some event, try something like this:

$(document).ready(function() {
$("element").click(function() {
    follower($("div.first"));
$("div.will_slide_down").slideDown()).
})
    })

    function follower(el) {
        if ($("div.will_slide_down").is(":animated"))
        {
            var leader = $("div.will_slide_down");
            while(leader.is(":animated"))
                  {
                  el.animate({
                      height: leader.css('height')
                  },3000);
                  }
        }
    }

What you could do, is position .will_slide_down somewhere off-screen - without hiding it - at page-load to measure its height. Then you can hide it, move it back and use the height (adding the initial height of .second...) to calculate the new height of .first and just animate the two at the same moment.