jQuery在Ajax加载时使div高度变化

我正在做一个简单的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加载之后的值。

这可能吗？

最佳答案

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

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

关于jQuery在Ajax加载时使div高度变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4085800/