Question

Firefox: jsFiddle

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.

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
  }
});

};

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; }

Answer 1

Try animating the height property as opposed to using the slideUp() method.