I use the .animate() function:

 $('.more_text').click(function(e) { e.preventDefault() var text = $(this).siblings('.why-i-cont-txt-body'); text.animate({ // width: 400, height:'100%', opacity: 1 }, 2000); });

At the same time in block styles:

 .txt-body-more { max-height: 300px; overflow: hidden; }

It is necessary to change the max-height to 100% , while my block opens abruptly, but there is no smoothness.

  • Maybe your browser is old, or your computer is weak, or is your computer parallel with something else? In my fiddle animation, it goes more or less smoothly. - Regent
  • no, the latest version of chrome browser just doesn't work - modelfak
  • And in the submitted fiddle, does the animation go too fast? - Regent
  • @Regent, he is trying to change max-height - in this case, the animation does not work at all (at least, written in css). - Qwertiy ♦
  • @Regent, though no, I'm wrong. It works. jsfiddle.net/1mr99f6g - Qwertiy ♦

1 answer 1

Try this:

 text.animate({ // width: 400, height:'100%', opacity: 1, -webkit-transition: 1s ease-out; -moz-transition: 1s ease-out; -o-transition: 1s ease-out; transition: 1s ease-out; }, 2000);