Answer the question
In order to leave comments, you need to log in
How to smoothly increase the height of the element in which some content is inserted?
Good morning everybody.
Some content is inserted into the block using js, the height of the block is unknown, the height of the inserted content is also unknown.
How to force the block to increase height not jerky but smoothly?
I tried to set the following styles to the container: transition: all 1s ease-in-out;
but it does not help.
Here is an example made on codepen, tamm it is clear that the block increases the height in jerks.
Answer the question
In order to leave comments, you need to log in
var a = $('#container').height();
$('#container').height(a);
$('#container').append('<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd.incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd</div>');
var b = $('.block').height() + 10; // 10 равен padding. Можно тоже автоматом получать
$('#container').animate({'height':b},1000);
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question