1

このWeb ページには、一連のボタンがあり、クリックすると、下のセクションが展開されてより多くのコンテンツが表示されます。ページの説明がフェードアウトし、選択したセクションのコンテンツがフェードインします。

私が現在経験している問題は、セクションが拡大するにつれてテキストが移動するという事実です (私が話していることを確認するには、[卒業] ボタンをクリックしてください)。すべてを実現するために使用している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 の css ファイルに width:100% を追加します。

あなたが見ている問題は、アニメーションのステップの間に .animate() が実行されると、overflow:hidden がアニメーション化された要素に追加されるためです。

オーバーフロー非表示が適用されている場合、アニメーション化している要素には明示的な寸法がないため、コンテンツを非表示にしようとし、親要素が計算された幅を失うため、明示的に設定する必要があります

于 2012-10-15T02:17:44.597 に答える