jQuery를 사용하여 div에 텍스트 삽입을 애니메이션으로 처리

Question

jQuery에서 animate을 사용하여 div로 내용을 부드럽게 채울 수 있습니까? 즉, 내용을 삽입 할 때 div의 높이를 높이면 애니메이션이 적용됩니까?

예를 들어 (HTML) :

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

다음 (자바 스크립트) :

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

내가 HTML의 삽입, 따라서 높이 증가 애니메이션을하고 싶습니다.

Answer 1

텍스트를 실제로 애니메이션화하려면 한 번에 한 글자 씩 텍스트를 천천히 추가해야합니다. 당신이 더 많은 텍스트를 드롭으로 매우 느리게 자동으로 높이를 조정 : 당신은

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

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

Answer 2

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'); 

편집 :

당신은 그래서 당신은 animate() 및 height()this way을 사용할 수 있습니다 할, 부드럽게 DIV의 높이를 늘릴 수 있습니다.

나는 FadeIn sample도 만들었습니다.

Answer 3

아마도 CSS 속성 overflow:hidden; height:...과 jQuery의 slideDown() 기능의 조합을 사용할 수 있습니다.

텍스트를 고정 높이 div에 삽입하고 새 높이를 결정한 다음 애니메이션을 적용하십시오.

Answer 4

대답은 매우 간단합니다), 이미 언급 한 내용을 다른 사람을 사용하여 .slideDown을 (비슷한 효과를 얻을 수 있습니다 div :

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

그 트릭을해야합니다. 이에 따라 5000을 조정해야 할 수도 있습니다.

또한 수직 스크롤 막대가 나타나서 'thedivid'를 overflow : hidden으로 만들고 싶습니다.

행운을 빈다.