Dynamic equal height with jQuery

[damir]

Hi everyone!

I have a problem with dynamic height. I've made an equal height function which basically works when it's called, but the problem is with jquery animations, to be more precise with slideDown function in combination with ajax.

The right side (see image below) is a place for comments, and after each submitted comment with ajax it's added with slideDown function. I don't know how to make that both section heights change their height dynamically during the slideDown animation.

Scheme:

Code:

function SetHeight()
{  
   var tallest = 0;  
   $("#content > section").height('auto');
 
   if ($("section#left, section#right").size() > 1)
   {
      $("#content > section").each(function()
      {
         height = $(this).height();
         if (height > tallest)
            tallest  = height;
      });  
 
      $("#content > section").height(tallest); 
   }
}
 
$(document).ready(function(){
   SetHeight();
}
 
$('form').submit(function(event){
   event.preventDefault();
   $('button[type=submit]').attr('disabled', 'disabled');
 
   $.post('/script/shift-comment',
   {
      shift: $('input[name=shift]').attr('value'),
      message: $('textarea').val()
   },
   function(data)
   {
      $(data).insertBefore('#comment').hide().slideDown();
      $('textarea').val('');
   });     
});