jQuery slideUp Expands Element Before Animation

When a slideUp is called the element expands. It's original height is 20px but then expands to ~31px

by vol7ron

HTML

<button onClick="run()">Slide Up</button>


<div class="container">
  <div class="content alert">
    Alert! Hide
  </div>
</div>
<div>Start Size: <span id="start-size"></span></div>
<div>Max Size: <span id="max-size"></span></div>

CSS

.container { border:1px solid black; margin:20px; padding: 5px; }
.content { border:1px solid #900; height:20px; padding:5px; }
.alert { background: #c99; color: #900; }

JavaScript

window.run = function(){
  var $alert = $('.alert').clone();                                    // Store for another run
  var maxSize = 0;
  
  $('#start-size').html($('.alert').height());                         // Default start size
  
  $('.alert').slideUp({
    duration:1500,
    step: function(){ 
      var _height=$(this).height();
      if (_height>maxSize) {
        maxSize = _height;
        $('#max-size').html(maxSize);
      }
    },
    complete: function(){
      $(this).remove();
      setTimeout(function(){$('.container').append($alert);},1000);   // Reset for another run
    }
  });
};