javascript - 关于属性更改的 jQuery 动画

Question

我有 Idiv或其他一些将内容加载到其中的元素：

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

然而，高度div会随之改变，导致页面上下跳动，看起来很丑。

有没有办法在加载或更改新内容时为高度设置动画？我知道FluidMoveBehavior在 C# 中可以做到这一点。

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

Answer 1

这是一些小提琴

当您想使用 jQuery 创建高度或宽度动画时，您必须设置一个表示所需大小的数字。我假设您在这种情况下使用 height: auto ，因此您必须找到一些解决方法。

1. 获取高度：

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

2. 动画到autoHeight：

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

并在一起：

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

从这里偷来的

Answer 2

我做的是相反的。在调用加载之前，如果还没有，我会为页面设置动画以滚动到顶部。

这样任何新的动态内容的顶部总是在视图中。

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

Answer 3

您可以在 ,#my_div之前隐藏load()，然后slideDown()在完整功能中隐藏：

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