div의 텍스트가 jQuery 애니메이션을 사용하여 높이를 확장 할 때 이동합니다

Question

this webpage에 클릭하면 다음 섹션이 확장되어 더 많은 콘텐츠가 표시됩니다. 페이지에 대한 도움말이 사라지고 선택한 섹션의 콘텐츠가 희미 해집니다.

현재 발생한 문제는 섹션이 확장됨에 따라 텍스트가 이동한다는 것입니다 ('졸업'버튼을 클릭하면 나는 말하고있다).

function expandTix(newHeight) { 
    $('#tixcontainer').animate({ 
     height: newHeight + 'px' 
    }); 
} 
$('.gradbutton').click(function(){ 
    $('.startinfo').fadeOut(); 
    $('.gradinfo').fadeIn(); 
    expandTix(300); 
}); 

그리고 HTML :

<div id="tixcontainer"> 

    <div class="tixcontent startinfo"> 
     Select a ticket type to begin ordering your graduation tickets. 
    </div> 

    <div class="tixinfo hidden gradinfo"> 
     You selected "Graduate" 
    </div> 

</div> 

가 어떻게 텍스트로 움직이지하지 않도록 그것을 만들 수 있습니다 여기에 jQuery를 내가 모든 것을 일어날 수 있도록 (전체 스크립트 파일 here)를 사용하고 있어요 그것 animates?

미리 감사드립니다.

Answer 1

이 작업 데모 시도 :

(차이을 보여 버기 데모) http://jsfiddle.net/DpG6A/1/ :http://jsfiddle.net/8NegC/

이 맞는 것 하나 :) 그래서 당신은 차이를 볼 수있는이 버그에 비해 필요를 나머지는 당신의 필요 :)

코드 맞는

function expandTix(newHeight) { 
    $('#tixcontainer').animate({ 
     height: newHeight 
    }, 'slow', function() { 
     $('.gradinfo').fadeIn(); 

    }); 

} 
$('.gradbutton').click(function() { 
    $('.startinfo').fadeOut(); 
    expandTix($('.startinfo').height()); 

});​ 

Answer 2

#tixcontainer 요소에 너비가 부족합니다.

추가 폭 : .animate()가 애니메이션의 단계 사이에, 실행될 때, 그것은 오버 플로우 추가 할 것입니다 때문에 당신이보고있는

문제 #tixcontainer 요소의 CSS 파일에 100 %는 다음과 같습니다에 숨겨진 움직이는 요소. 숨겨진 오버 플로우가 당신이 명시 적으로 그것을