jQuery: slideUp expands element before animation
<p>Firefox: <a href="http://jsfiddle.net/vol7ron/Pbz3Z/" rel="nofollow">jsFiddle</a></p>

<p>I'm not sure if this is just my setup, but in Firefox, there seems to be a little jump in height before the animation begins.</p>

<p>JavaScript:</p>

<pre><code>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&gt;maxSize) {
      maxSize = _height;
      $('#max-size').html(maxSize);
    }
  },
  complete: function(){
    $(this).remove();
    setTimeout(function(){$('.container').append($alert);},1000);   // Reset for another run
  }
});
</code></pre>

<p>};</p>

<p>HTML:</p>

<pre><code>&lt;button onClick="run()"&gt;Slide Up&lt;/button&gt;  
&lt;div class="container"&gt;
  &lt;div class="content alert"&gt;
    Alert! Hide
  &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;Start Size: &lt;span id="start-size"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;Max Size: &lt;span id="max-size"&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

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