최종 크기를 모른 채 jQuery를 사용하여 DIV 크기에 애니메이션 적용

Question

jQuery를 사용하여 동적으로 삽입되는 내용의 DIV가 있습니다. div가 콘텐츠와 함께 렌더링 될 때 크기를 0px 크기로 확대 한 것처럼 div가 나타나길 원합니다.

내용이 텍스트이므로 문서에 추가 할 때 걸리는 크기에 대한 정보가 없습니다. 최종 크기를 알았을 때 jQuery Animate를 사용하여 div를 애니메이션하는 방법을 알고 있지만 그것을 모르는 경우 어떻게 해야할지 모릅니다.

예를 들어 width: "+=10"을 사용하면 애니메이트하지 않고 div보다 큰 div가 생성됩니다. 감사.

Answer 1

너비와 높이를 저장하고 항목의 너비와 높이를 0으로 설정하여 항목을 삽입하십시오. 이렇게하면 너무 빨리 표시되어 애니메이션에 필요한 너비와 높이의 최종 값을 갖게됩니다.

Live Demo

var $div = $('<div>', { 
    text: <your text> 
}); 

// <append your element> 

var width = $div.width(); 
var height = $div.height(); 

$div.css({ 
    width: 0, 
    height: 0 
}); 

$div.animate({ 
    width: width, 
    height: height 
}, { 
    duration: 'slow', 
    easing: 'linear' 
});