CODEWITHSUNDEEP
javascriptjquerycss
Kokodoko
Kokodoko

Reputation: 28128

How animate height of a div while image is still loading?

My code is showing pages by emptying an HTML tag and replacing the content. The height of the parent div changes when different content is loaded, but I can't get the height change to transition smoothly. This probably has to do with the image still being loaded. What would be a good way to transition between these two states?

// first fade out
$(".page").animate({opacity:0}, 600, function() {
        // then replace html
        $(".page").html("new html here including an <img src='image.jpg'><br>and more text.");
        // now calculate new height and then fade in again
        var endHeight = $(".page").height();
        $(".page").animate({opacity:1, height:endHeight});
});

Upvotes: 2

Views: 524

Answers (2)

Michael Zalla
Michael Zalla

Reputation: 852

Suppose you have a div element that acts as a container for you content. If you are loading content that may take some noticeable time to load (such as an image), you can wait for that new element to load, and then manually re-set the height of the container. Doing this, in conjunction with CSS3 transitions, will prevent the container from animating before the content can actually be displayed.

From the fiddle:

$(document).ready(function() {

    var container = $('.container');

    /* ... */

    function replaceContent(container) {
        var content = new Image();
            content.onload = function(e) {
                container.empty().append(content);
                container.css({'height': content.height});
            };
            content.src = getRandomImageUrl();
    };

    setInterval(function() { replaceContent(container); }, 5000);

});

Working example on jsFiddle: http://jsfiddle.net/7Vn5a/1/

Upvotes: 1

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Did you try css transitions?

.YOUR_DIV{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}

Upvotes: 1

Related Questions