JavaScript анимация изменения размера div - PullRequest
Новая
       5

JavaScript анимация изменения размера div

1 голос
/ 24 июня 2009

Я пытаюсь разместить небольшую анимацию на странице. У меня есть 2 элемента 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 на сайте, так что это может быть путь вперед?

Ответы [ 3 ]

6 голосов
/ 24 июня 2009

Хорошо, я только что собрал очень быстрый и грязный пример.

Вот 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 и оживляет до этой высоты. Вы можете добавить немного замедления к анимации / изменить скорость, чтобы сделать ее немного более отточенной.

Надеюсь, это поможет.

1 голос
/ 24 июня 2009

Может быть, вы можете использовать контейнер вокруг содержимого div (со скрытым переполнением) и изменить его размер в соответствии с высотой содержимого, тем самым достигнув того, что вы пытаетесь сделать?

0 голосов
/ 24 июня 2009

Я согласен с ответом выше. Вы можете применить изображение в качестве фонового изображения для контейнера, а затем анимировать контейнер. Таким образом, фоновое изображение будет перемещаться вниз вместе с контейнером (при условии, что вы закрепите его на нижней части!)

...