Блог

Возможно ли использовать 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-кода и, следовательно, увеличение высоты.

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

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

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

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

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

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

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

Вероятно, это должно сработать. Возможно, вам потребуется соответствующим образом настроить 5000.

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

Удачи!

вы можете использовать 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');
  

Редактировать:

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

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