jquery - 如何对内容 block 进行动画处理？

Question

我正在使用twitter-bootstrap框架。

我正在尝试为页面的一部分添加动画。首先输入这个fiddle 在下面的代码之前我将解释这个想法。

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

here is the code demo

$(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");
    }
});

});