1

在这个网页上，我有一组按钮，点击后，下面的部分将展开以显示更多内容。页面说明淡出，所选部分的内容淡入。

我目前遇到的问题是文本随着部分的展开而移动（单击“毕业”按钮以查看我在说什么）。这是我用来让一切发生的jQuery（完整的脚本文件在这里）：

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>

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

提前致谢！

4

2 回答 2

1

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

与这个越野车相比，这将适合您的需要，:)以便您可以看到差异：http: //jsfiddle.net/DpG6A/1/（越野车演示以显示差异）

休息会满足你的需要:)

代码

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

    });

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

});​
于 2012-10-15T02:16:59.450 回答
0

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

为元素 #tixcontainer 添加 width:100% 到您的 css 文件

您看到的问题是，当 .animate() 运行时，在动画步骤之间，它会在动画元素中添加溢出：隐藏。

由于您正在制作动画的元素在应用溢出隐藏时没有明确的尺寸，因此它将尝试隐藏内容并且父元素将失去它的计算宽度，因此您需要明确设置它

于 2012-10-15T02:17:44.597 回答