JavaScript animate resizing div

javascript jquery animation resize

12,308

Solution 1

OK, I've just put together a very quick and dirty example.

Here's the 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>

The jQuery used is here

    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);
    });});

And 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;}

I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.

I hope this helps.

Solution 2

Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?

12,308

Author by

MrFidge

Updated on June 04, 2022

Comments

MrFidge almost 2 years
I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
```
<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" />
```
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!

The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.

Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?
MrFidge almost 15 years

OK, but how would I go about animating the resize, thats the thing I really need to understand.
MrFidge almost 15 years

Ah, I probably should have been more specific - I've put the code here showing an image, but sometimes it will need to be a flash file, so can't use the background: url() property.
Russ Cam almost 15 years

you can provide a live demo to the OP by putting the code on jsbin.com and then linking to the saved public URL
Nooshu almost 15 years

Ah ok, thanks for the tip. That sounds much easier than what i did above :)
Nooshu almost 15 years

Ok here is the jsbin version jsbin.com/uyoxi. I have attached an image to the bottom of the left column on my dev version, but you should see where the code is to edit that. phew!
MrFidge almost 15 years

Thats quality! Thank you very much :)