javascript – How to smoothly increase the block height?

Question:

Using 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);
});

Moreover, in block styles:

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

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

Answer:

Try it like 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);
Scroll to Top