Question

我不确定这只是我的设置，但在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：

<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

似乎如果你在动画之前设置了最大高度，它就会修复它。

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

但是，我还没有找到为什么会这样。

Answer 2

尝试设置height属性的动画，而不是使用slideUp()方法。

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

2 个答案: