动画DIV的高度以适应动态加载的内容

Question

A DIV which it's content (another inner DIV ) can be changed. I want to achieve the following effect:

1. Fade out current content.

2. Animate the height of DIV to fit the height of the new content.

3. Fade in the new content.

Answer 1

See this fiddle:

http://jsfiddle.net/WNS3B/

This is made possible using jquery and a fallback function of fadeOut method.

$('.one').fadeOut(function(){
    $('.p').css('height', oldH); // keeping parent from collapsing
    $('.p').animate({"height": newH});
    $('.two').delay(300).fadeIn();
});

Answer 2

You do not need to use delay . you can use done callback on animate

$('.p').css('height', oldH); // keeping parent from collapsing
$('.one').fadeOut(function(){
    $('.p').animate({"height": newH},{
        done: function(){
            $('.two').fadeIn();    
        }
    });

});
})

see the updated fiddle http://jsfiddle.net/WNS3B/2/