Question

我正试图在页面上放一个小动画。我有两个div并排，其中第二个有通过Ajax调用的内容，所以div高度不同，没有页面刷新。

<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />

这基本上给了我一个2列的布局，无论高度如何，图像都在左侧列的下方。一切都好！

我尝试做的事情是，当页面高度因传入的Ajax内容而发生变化时，图像的过渡动画。目前图像上下颠簸，我很想让它顺畅地滑下页面。

这可能吗？我不是真正的JavaScript，所以我不知道如何做到这一点。我在网站上使用jQuery库，那么这可能是一种前进的方式吗？

Answer 1

好的，我刚刚汇总了一个非常快速而又肮脏的例子。

这是HTML：

    <body>
        <a href="####" id="addContent">Add content</a>
        <div id="outerContainer">
            <div id="left" class="col">
                <p>Static content</p>
                <img src="images/innovation.gif" width="111px" height="20px">
            </div>
            <div id="right" class="col">
                <p>Ajax content</p>
            </div>
        </div>
    </body>

使用的jQuery就在这里

    jQuery(function($){
    var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";

    $("#addContent").click(function(e){
        $("#right").append(addedHTML);
        var rightHeight = $("#right").height();

        //Animate the left column to this height
        $("#left").animate({
            height: rightHeight
        }, 1500);
    });});

和CSS：

    #outerContainer {
        position: relative;
        border: 1px solid red;
        margin: 20px auto 0;
        overflow: hidden;
        width: 400px;}
    .col {
        width: 180px;
        display: inline;
        padding: 0 0 40px;}
    #left {
        float: left;
        border: 1px solid cyan;
        position: relative;}
    #left img {
        position: absolute;
        bottom: 0;
        left: 0;}
    #right {
        position: absolute;
        top: 0;
        left: 180px;
        border: 1px solid green;}
    #addContent {
        text-align: center;
        width: 100px;
        margin: 20px auto 0;
        display: block;}

我添加了一个按钮，只是为了添加一些'Ajax'内容。当你这样做时，它抓住div的新高度并动画到那个高度。您可以为动画添加一些缓动/更改速度以使其更加精致。

我希望这会有所帮助。

Answer 2

也许你可以在内容div周围使用一个容器（隐藏溢出）并根据内容的高度调整一个容器，从而实现你想要做的事情？

Answer 3

我同意上面的答案。您可以将图像作为背景图像应用于容器，然后为容器设置动画。这样，背景图像将随容器向下移动（假设您将其锚定到底部！）

JavaScript动画调整div

3 个答案: