jquery - コンテンツのブロックをアニメーション化する方法は?

Question

twitter-bootstrapフレームワークを使用しています。

ページの一部をアニメーション化しようとしています。まず最初にこのフィドルを入力し、以下のコードの前にアイデアを説明します。

HTML

<div id="bluecont" class="container">
    <div class="row">
        <div class="span8 offset2">
             <h1>Hello stackoverflow!</h1>
            <button id="clickhide">Show span</button>
        </div>
        <div id="spanhide" class="span8 offset2">
             <h2>Thanks for the help!</h2>
        </div>
    </div>
</div>
<div id="redcont" class="container">
    <div class="row">
        <div class="span8 offset2">
             <h3>This would be the rest content of the page</h3>
        </div>
    </div>
</div>

JS

$(document).ready(function () {
    $("#spanhide").hide();

    $("#clickhide").click(function () {
        var caption = $(this).text();

        if (caption == "Show span") {
            $("#spanhide").fadeIn("slow");
            $(this).text("Hide span");
        } else {
            $("#spanhide").fadeOut("slow");
            $(this).text("Show span");
        }
    });
});

CSS

.span8 {
    background: green;
    padding: 20px
}
#bluecont {
    background:blue;
    padding: 20px
}
#spanhide {
    background: yellow;
}
#redcont {
    background: red;
    padding: 20px
}
#clickhide {
    width: 100%;
}

---

ご覧のとおり、ボタンを押すと表示される非表示のスパンがあります。しかし、それが現れると、赤い色のコンテナはすぐに落ちます。私がしようとしているのは、非表示のスパンに表示するスペースができるまで、少しずらしてみることです。隠したい時も同じです。

CSSトランジションを使用している可能性がありますか？またはjQueryの.animate（）関数？わかりません...最善の方法を探しているので、助けやアドバイスをいただければ幸いです。

さらに情報が必要な場合はお知らせください。投稿を編集します。

Answer 1

ここにコードデモがあります

$(document).ready(function () {
$("#spanhide").hide();

$("#clickhide").click(function () {
    var caption = $(this).text();

    if (caption == "Show span") {
        $("#spanhide").css({opacity:0}).slideDown("slow").animate({opacity:1});
        $(this).text("Hide span");
    } else {
        $("#spanhide").animate({opacity:0}).slideUp("slow");
        $(this).text("Show span");
    }
});

});

Answer 2

最善の解決策は、.slideToggle()関数を使用することです。

ここにそれを示すフィドルがあります：http://jsfiddle.net/5Fkvv/9/

$(document).ready(function () {
    $("#spanhide").hide();

    $("#clickhide").click(function () {
        $("#spanhide").slideToggle("slow");

        if ($(this).text() == "Show span") {
            $(this).text("Hide span");
        } else {
            $(this).text("Show span");
        }
    });

});

Answer 3

最初にスパンの高さをコンテナのdivに追加してアニメーション化するだけです。

$(document).ready(function () {
        $("#spanhide").hide();

        $("#clickhide").click(function () {
            var caption = $(this).text();

            if (caption == "Show span") {

                $('.row').animate({
                    height:'+='+ ($('#spanhide').height() + 20)+'px'  
                });

                $("#spanhide").fadeIn("slow");
                $(this).text("Hide span");
            } else {
                $("#spanhide").fadeOut("slow");
                $(this).text("Show span");
            }
        });

    });