jquery slideDown - sliding down more than required and then reversing

Question

Here is my code

$.get("insert-note.exec.php", {mess: messIn}, function(ajaxContent) {
   if(ajaxContent != 0) {    
      $('#message-text').val('');  
      $('#insert-flag').after(ajaxContent);  
      $('#insert-flag').next('.message-bubble').slideDown('slow');
   }
});

CSS Part

#message-text {
 padding:4px;
 outline:none;
 color:#FFF;
 border:3px solid #101010;
 background-color:#FFF;
 border-radius:6px;
 -moz-border-radius:6px;
}    

.message-bubble {
 width:92%;
 padding:1.50%;
 margin-bottom:2%;
 letter-spacing:1px;
 border-radius:8px;
 overflow:hidden;
 cursor:pointer;
 -moz-border-radius:8px;
 background-color:#FFF;
 -moz-box-shadow: 1px 1px 1px #FFF;
 -webkit-box-shadow: 1px 1px 1px #FFF;
 box-shadow: 1px 1px 1px #FFF;
}

#insert-flag {
  width:0;
  height:0;
}

In short, I am trying to fetch data (ajax) from server which is returned as a div and I am trying to slide the div into the current interface.

Problem: It all works as expected except that the new div slides a little extra lower and then recovers to the appropriate size.

For example: For a 3-line div, the effect results in an initial slideDown of, let say, 5-lines and then akin to a effect of slideUp adjusts itself to the appropriate 3-lines.

How can I handle this?

(Note: A similar effect can be seen at Loopt which works properly when new content is pushed)