jquery - 使用 jQuery animate 扩展高度时 div 中的文本移动

Question

关于 this webpage ，我有一组按钮，单击这些按钮时，下面的部分将展开以显示更多内容。页面说明淡出，所选部分的内容淡入。

我目前遇到的问题是文本随着部分的扩展而四处移动(单击“毕业”按钮以查看我在说什么)。这是我用来实现一切的 jQuery(完整脚本文件 here):

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>

我怎样才能使文本在动画时不会跳来跳去？

提前致谢!

Answer 1

试试这个工作演示: http://jsfiddle.net/8NegC/

与这个有问题的 :) 相比，这将满足您的需要，以便您可以看到差异:http://jsfiddle.net/DpG6A/1/ (展示差异的 Buggy 演示)

休息会满足你的需要 :)

代码

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

    });

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

});​