Question

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

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

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

如何为增长/缩小设置动画？

我知道我可以slideUp / slideDown或show / hide eg。

$('#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

Answer 2

#myDiv style =“position：relative;”。然后在 .load（）的回调中，创建一个隐藏的，将其宽度设置为 #myDiv 并将结果加载到其中。读取隐藏的 div 的高度，并为 #myDiv 执行该高度的动画。删除隐藏的 div 。

Answer 3

您需要jQuery.animate。有了它，您可以将任何属性设置为任何值。在您的情况下，您可以将height从之前的值设置为新值。

但请注意，您需要在替换内容之前记录旧值，因为在更新内容时，它的高度（如果未设置为绝对值）将会更新。也许调整包装容器的大小可能是有益的。

像这样：

<div class="wrapper">
    <div>Content is here</div>
</div>

如果您为overflow将hidden的值设置为.wrapper，则可以调整其大小以匹配内部div的高度，以达到您的效果'之后。

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

3 个答案: