Javascript jQuery在属性更改时设置动画

我有I

div

或其他一些元素，我用它们加载内容：

$('#my_div').load('ajax.php',function(){
    //Do random stuff.
}

但是

div

的高度会随之改变，导致页面上下跳动，看起来很难看

当加载或更改新内容时，是否有一种方法可以使其设置高度动画？我知道用C#中的

FluidMoveBehavior

可以做到这一点

---

如何使用Javascript/jQuery实现相同的效果？

我所做的恰恰相反。在调用load之前，我会设置页面动画以滚动到顶部（如果还没有）

因此，任何新的动态内容的顶部都始终可见

我知道这不是你想要的答案，但我发现它效果最好。

当您想要使用jQuery创建高度或宽度动画时，必须设置一个指示所需大小的数字。我假设您在本例中使用height:auto，因此您必须找到一个小workaround

获取高度：

var autoHeight = $("#content").height("auto").height();

将动画设置为自动高度：

$("#content").animate({height: autoHeight}, 1000); 

加在一起：

   var currentHeight = $("#content").height();
   var autoHeight = $("#content").height("auto").height();
   $("#content").height(currentHeight);
   $("#content").animate({height: autoHeight}, 1000); 

您可以在

加载（）之前隐藏
#my_div
，然后在完整函数中隐藏
向下滑动（）
：

$('#my_div').hide().load('ajax.php', function() {
  $(this).slideDown();
});

或者，在加载完成后，创建一个临时元素，隐藏它，附加它，使用其高度设置
\my_div
动画，然后将其删除

$('<span/>').hide().appendTo('body').load('ajax.php', function(text) {
  $('#my_div').animate({ height: $(this).height() }, '800').html(text);
  $(this).remove();
});

$（“”）.hide（）.appendTo（'body'）.load（'ajax.php'，函数（文本）{
$（'mydiv'）。动画（{height:$（this.height（）}，'800'）。html（文本）；
$（this.remove（）；
});