There seems to be an issue with animating the height property of an element as it is not animating at all.
Check out the fiddle where the animation is attempted.
Here is the HTML:
<ul>
<li>
li 1
</li>
<li>
li 2
</li>
<li>
li 3
</li>
</ul>
This is the CSS:
ul.hide {
height: 0px;
overflow: hidden;
}
ul {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
And this is the JS:
setTimeout(function () { $('ul').addClass('hide'); }, 2000);
setTimeout(function () { $('ul').removeClass('hide'); }, 4000);
Is there a crucial detail that might have been missed or forgotten?