title: Autoscroll div with jQuery to the bottom after appending
body: <p>I have a div class='messages'. I add date to this div via jQuery.append()
  Here are the styles:</p>
  
  <pre><code>.messages {
  border: 1px solid #dddddd;
  padding:10px;
  height: 400px;
  overflow-x:visible;
  overflow-y: scroll;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom:10px;
  font-size:14px;
  }
  </code></pre>
  
  <p>For autoscroll I use such function:</p>
  
  <pre><code>receiveMessage = function (name, message, type) {
      //adding new message
      $("#messages").append('&lt;strong&gt;' + name + ": " + '&lt;/strong&gt;' + message + '&lt;br&gt;');
      /autoscrolling to the bottom
      $("#messages").animate({
          scrollTop: $("#messages").height()
      }, 300);
  }
  </code></pre>
  
  <p>About ~20 messages are scrolling normally, but after it 'hangs', new messages are not scrolled. Chrome Version 19.0.1084.56 . What I'm doing wrong?
  Thanks!</p>