Jquery在ajax加载时改变div高度的动画

Question

我正在做一个简单的ajax加载来提取搜索结果并将它们显示在div中:

$('#myDiv').load('update.php?id=123', function() {
   //callback here
});

一切正常，div 按预期更新。 'myDiv' 根据返回结果的数量缩小或增大。

如何制作放大/缩小的动画？

我知道我可以 SlideUp/slideDown 或显示/隐藏，例如

$('#myDiv').slideUp('fast').load('update.php?id=123', function() {
   $('#myDiv').slideDown('fast');
});

但是，我不想先缩小或隐藏它 - 我希望高度从 ajax 加载之前的值变为 ajax 加载之后的值。

这可能吗？

Answer 1

首先您需要停止自动调整大小。

var $mydiv = $('#myDiv');
$mydiv.css('height', $mydiv.height() );

然后，一旦加载完成，我们将内容包装在 div 中并使用它来重新计算高度。

$mydiv.load('update.php?id=123', function() {
   $(this).wrapInner('<div/>');
   var newheight = $('div:first',this).height();
   $(this).animate( {height: newheight} );
});

<强> Demo