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

Question

可以更改其内容（另一个内部DIV）的DIV。 我想达到以下效果：

1. 淡出当前内容。

2. 为DIV的高度设置动画以适应新内容的高度。

3. 淡入新内容。

Answer 1

看到这个小提琴：

http://jsfiddle.net/WNS3B/

使用jquery和fadeOut方法的回退函数可以实现这一点。

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

Answer 2

您无需使用delay。您可以在animate

上使用完成回调

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

});
})

看到更新的小提琴 http://jsfiddle.net/WNS3B/2/