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

});

Answer 2

您的#tixcontainer元素缺少显式宽度。

为您的css文件添加宽度：100％元素#tixcontainer

你看到的问题是因为.animate（）运行时，在动画步骤之间，它会添加溢出：隐藏到动画元素。

由于您应用动画的元素在应用溢出隐藏时没有明确的尺寸，因此它会尝试隐藏内容，而父元素会松开它的计算宽度，因此您需要明确设置它

当使用jQuery动画扩展高度时，div中的文本会四处移动

2 个答案: