Jquery 如何设置内容块的动画？

我正在使用twitter引导框架

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

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>

CSS

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

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

---

正如你看到的，当我按下按钮时，会显示一个隐藏的范围。但当它出现时，红色的容器会直接下降。我要做的是稍微置换它，直到隐藏的跨度有空间出现。当我想把它藏起来的时候也是一样

可能正在使用CSS转换？jQuery的or.animate（）函数？我不知道。。。我正在寻找最好的方法，所以任何帮助或建议都将不胜感激

---

如果您需要更多信息，请告诉我，我将编辑此帖子。

动画制作会很好，只需先将跨距的高度添加到容器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");
            }
        });

    });

最好的解决办法是使用函数

这里有一把小提琴可以演示它：

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

});

---

你真厉害！而且也很优雅。谢谢你！我是如何在动画结尾处安排一个活动的？如果我使用fadeIn（），我知道怎么做，但用这种方式恐怕不行。。。你知道怎么做吗？你让我开心。。。遗憾的是，你不能给这个回答更多的分数。@Joëlle在关闭/隐藏黄色条纹时有闪烁，如果你有条件使用

slideToggle

来识别与折叠或扩展相关的内容，这是没有意义的。

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

});