动画高度内容不会消失

Question

当我使用这段代码时

$(function(){
  $('#myList').animate({
    height: '0px'
  }, 800);
}

<div id="myList">
  <h1 id="text"> Text Here </h1>
</div>

div #myList会像预期的那样为高度设置动画，但动画结束后仍会显示h1#text。

如何让它工作，以便div#myList的高度变得那么小，以至于内容不适合并且会“消失”？

注意：我只是注意到h1会“消失”，因为高度会像它应该的那样动画，但它会闪烁并在函数完成时返回。

Answer 1

div #myList需要在css中设置overflow:hidden;。

Answer 2

试试这个

$(function(){
  $('#myList').animate({
    height: '0px',
    overflow : 'hidden'
  }, 800);
}