Question

我有一个由三个图像组成的简单列。我需要的是柱子实际上是从底部向上长大并保持在它生长的高度（我的意思是，当页面加载时，列动画高度并保持这种状态）。尽管我已经尽力阅读，但我仍然陷入困境，似乎无法弄清楚如何做到这一点。

这是我的代码：

<!DOCTYPE html>
<html>

    <head>
        <title>Column</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

        </script>
        <script>
            $(document).ready(function() {
                $(".second").animate({
                    height: '250px'
                });
         });
        </script>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #container {
                position: absolute;
                width: 100%;
                bottom: 100 px;
                left: 100px;
            }
            .first {
                background-image:url(first.png);
                background-repeat: no-repeat;
                height: 100px;
                margin-top: 100px;
            }
            .second {
                background-image:url(second.png);
                background-repeat:repeat-y;
                height: 20px;
                margin-top: -30px;
            }
            .third {
                background-image:url(third.png);
                background-repeat: no-repeat;
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="first">&nbsp;</div>
            <div class="second">&nbsp;</div>
            <div class="third">&nbsp;</div>
        </div>
    </body>

</html>

Answer 1

<script>
    $(document).ready(function() {
        $(".second").animate({
            height: '250px'
        });
    }); // < what you're missing
</script>

Answer 2

在@php_nub_qq上捎带 - 你的CSS中也有拼写错误：

#container { bottom: 100px; }

但要解决您的问题，因为您已在#container上使用绝对值，只需将其他人设为亲属并使用top: ##px;代替margin-top。

您可以在the fiddle here.

中看到这一点

使用Javascript：

$(document).ready(function () {
    $("#container div").animate({
        height: '250px'
    }, 1300);
});

CSS：

 #container {
     overflow: hidden;
 }
 .first {
     top: 100px;
     position: relative;
 }
 .second {
     top: -30px;
     position: relative;
 }
 .third {
     position: relative;
 }

我将CSS仅限于更改的内容。如果你没有看到它，它是一样的。亮点：在容器中添加overflow:hidden以隐藏来自世界的三幅图像，直到它们从蛋中孵化出来。然后position: relative;和top: 100px / top: -30px执行其余操作。随着容器的增长，它们将跟随容器，直到它们在各自top s达到极限。

如何使用Jquery动画从底部向上“增长”我的图像？

2 个答案:

使用Javascript：

CSS：