Использование jQuery для анимации вставки текста в Div

Question

Можно ли с помощью jQuery использовать animate, чтобы плавно заполнить элемент div содержимым, то есть оживить высоту элемента div, увеличивающегося при вставке содержимого?

Например (HTML):

 <div id="my-div"></div>

Тогда (JavaScript):

 $("#my-div").html("some new really long string of text which makes the div height increase.");

Я хотел бы анимировать вставку HTML, и, таким образом, увеличение высоты.

Answer 1

Если вы хотите по-настоящему оживить текст, вам нужно будет медленно добавлять текст по одной букве за раз. Вы можете получить аналогичный эффект, используя то, что уже упоминали другие, .slideDown ()

http://jsfiddle.net/rkw79/fCAVp/

$("#my-div")
    .hide()
    .html("some new really long string of text ...")
    .slideDown('slow');

Answer 2

Ответ очень прост: настраивайте высоту автоматически и очень медленно, когда вы добавляете больше текста в div:

$('#thedivid').append('<p>'+newtextbeingadded+'</p>').animate( { 'height':'auto' },5000 );

Это должно, вероятно, сделать свое дело. Возможно, вам придется настроить 5000 соответственно.

Кроме того, есть вероятность, что появится вертикальная полоса прокрутки, поэтому вы можете создать «thedivid» с переполнением: hidden;

Удачи!

Answer 3

Возможно, вы могли бы использовать комбинацию атрибутов css overflow:hidden; height:... и функции slideDown () jQuery.

Вставьте текст в div с фиксированной высотой, определите новую высоту и анимируйте ее.

Answer 4

вы можете использовать slideDown() и slideUp().

как то так:

$("#my-div").slideUp('slow', function() { $("#my-div").html("some new really long string of text which makes the div height increase."); }).slideDown('slow');

Edit:

вы можете плавно увеличить высоту div, для этого вы можете использовать animate() и height() this way.

Я также создал FadeIn sample.