0

Firefox：jsFiddle

これが私の設定であるかどうかはわかりませんが、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; }
4

2 に答える 2

0

アニメーションの前に最大の高さを設定すると、修正されるようです。

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

しかし、なぜこれが起こっているのかはまだわかりません。

于 2013-01-17T23:33:11.680 に答える
0

slideUp()メソッドを使用するのではなく、heightプロパティをアニメーション化してみてください。

于 2013-01-18T02:59:12.637 に答える