3

「start_game」の id を持つボタンがあり、クリック関数とボタンをフェードアウトするコールバックがあり、現在 css によって display:none に設定されている div にフェードインします。

ボタンをクリックすると、表示される div 用のスペースを確保するように、これらすべてを保持する外側のコンテナ div が拡張されますが、その中にあるコンテンツは表示されません。

現在のコードは次のとおりです。

$("#start_game").click(function () {
        $(this).fadeOut();
        $(".input-append").fadeIn();
    });

そしてhtml

<div class="hero-unit">
        <div id="container">
            <p>Shall we?</p>
            <button class="btn-primary btn-large" id="start_game">Play!</button>
            <div class="input-append hidden">
                <p>How many players?</p>
                <input class="span2" id="appendedInputButton" type="text" />
                <button class="btn" type="button">Go!</button>
            </div>
        </div>
    </div>

これが唯一のカスタム css で、他の css ファイルは twitter ブートストラップです。

.hidden {
display: none;
}

今、私は多くのアプローチを試みました。私はfadeInを試してみました.show（）またはhide（）またはtoggle（）またはfadeToggle（）のいくつかの異なる組み合わせを一緒にチェーンしようとしました。また、非表示の div のすべての子要素の反復をコールバックにアタッチし、fadeIn() を 1 つずつ実行しようとしましたが、何も機能していないようです。

Google Chrome 26 と IE10 でテストしています。

助けてくれてありがとう！

4

2 に答える 2

10

私はちょうど同じシナリオに遭遇しました。Twitter ブートストラップ コントロール グループを最初に非表示に設定してshow()から、コントロール グループの外側の div メソッドを使用すると、実際には表示されますが、そのコントロール グループ div の内容はまだ非表示になっています。

その理由は、ブートストラップ CSS が.hidden可視性 CSS ルールを内部 div にも追加するクラスを探しますが、JQuery の show() メソッドは隠しクラスを削除しません。CSS を直接操作して、隠しクラスを所定の位置に残します。

removeClass('hidden')その問題を解決するために使用できます。

おまけの質問: その遷移をどのようにアニメーション化しますか??

そして答えは次のとおりです。fadeIn().removeClass('hidden'); あまり直感的ではありませんが、うまくいきます:)

于 2013-07-29T23:57:46.703 に答える