如何为内容块制作动画？

Posted 2023-03-06

【中文标题】如何为内容块制作动画？

【英文标题】：How to animate a block of content?

【发布时间】：2013-05-16 12:19:10

【问题描述】：

我正在使用 twitter-bootstrap 框架。

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

HTML

<div id="bluecont" class="container">
    <div class="row">
        <div class="span8 offset2">
             <h1>Hello ***!</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() 函数？我不知道...我正在寻找最好的方法，所以任何帮助或建议都将不胜感激。

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

【参考方案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");
    
);

);

【讨论】：

你太棒了！而且也很优雅。谢谢罗希特！

我如何在动画结束时放置一个事件？如果我使用fadeIn()，我知道该怎么做，但是使用这种方式恐怕不会……请问您知道怎么做吗？

你让我很开心......很遗憾你不能给这个回复更多的分数。

【参考方案2】：

Animate 会很好，只需将 span 的高度先添加到容器 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");
            
        );

    );

【讨论】：

@Joëlle 在关闭/隐藏黄色跨度时闪烁

【参考方案3】：

最佳解决方案是使用.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");
        
    );

);

【讨论】：

如果您有条件使用slideToggle 识别与折叠或展开相关的内容是没有意义的。