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} );
});

演示