slowly count to twenty while appending the numbers to a div with jQuery

<div id="records">
</div>
<script type="text/javascript">
   $(function () {
      var collection = new Array();
      collection.length = 20;
      var counter = 0;
      $(collection).each(function () {
         $('#records').animate({ opacity: "1" }, 1000, function () {
            counter++;
            $('#records').append(counter + '<br />');
         });
      });
   });
</script>

 
 

Note that opacity: "1" does nothing. It is just a placeholder.