jQuery:slideUp在动画之前展开元素

火狐：

我不确定这是否只是我的设置，但在Firefox中，在动画开始之前，似乎有一点高度跳跃

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:

---

如果在动画之前设置“最大高度”，它似乎会修复它

var $alert = $('.alert');
$alert.css('max-height',$alert.height()).slideUp({...});

---

但是，我还没有找到发生这种情况的原因。

尝试设置height属性的动画，而不是使用

slideUp（）

方法。

这似乎是在治疗症状，而不是解决问题。我在一次淡出（现在是一次淡出）之后链接它，所以使用slideUp的可用回调非常有用。在我的另一个答案中设置最大高度也只是治疗症状，我更喜欢这样，因为使用

slideUp

比设置高度动画更能自我记录。不一定，在很多情况下，与使用可用的方法相比，您可能希望设置特定属性的动画，在这种情况下，您可能无法控制容器中的内容（更改容器高度或其他属性的附加页边距或标记）。因此，通过设置一个特定属性的动画，您可以控制最终结果，而不必对预制方法引入的问题进行编码。您可能会发现这很有用：我明白您所说的仅使用动画。我想确定的是

slideUp

是否有问题，应该进行修补。我发现的另一种选择是添加

$（this）.css（{'padding-bottom'：0，'padding-top'：0，'line-height'：$（this.height（）+'px'）

至

滑块的步进功能。视频显示这是填充的问题，但我也注意到，您还必须调整线条高度，尽管这会产生挤压效果。或者，您的方式（动画）类似于：
$（'.alert'）.parent（）.css（'overflow'，'hidden'）.end（）.animate（{height:0，'padding-top'：0，'padding-bottom'：0，'border-width'：0}）;仍然必须删除垂直填充和边框，并通过将溢出应用到其容器中来确保其保持隐藏状态。这似乎比我的
max height
解决方案要多得多。我已经更新了小提琴以显示这两个示例：（您必须对幻灯片进行注释并取消动画注释，因为我没有将其设置为同时显示这两个示例）
.container { border:1px solid black; margin:20px; padding: 5px; }
.content { border:1px solid #900; height:20px; padding:5px; }
.alert { background: #c99; color: #900; }

var $alert = $('.alert');
$alert.css('max-height',$alert.height()).slideUp({...});