Question

When I use this piece of code

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

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

the div #myList will animate the height like expected, but h1#text will still be visible after the animation is finished.

How do I make it work so that when the height of div#myList gets so small that the content wont fit and will “disappear”?

Note: I just noticed that the h1 will “disappear” as the height gets animated like it should but it blinks and comes back when the function is finished.

Answer 1

The div #myList needs to be set overflow:hidden; in css.