关于属性更改的 jQuery 动画答案

【问题标题】：jQuery animate on property change关于属性更改的 jQuery 动画
【发布时间】：2013-08-15 00:54:44
【问题描述】：

我有我 div 或我加载内容的其他元素：

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

但是div的高度随后会发生变化，导致页面上下跳动，看起来很难看。

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

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

【问题讨论】：

标签： javascript jquery jquery-load

【解决方案1】：

Here's some Fiddle

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

获取高度：

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

动画到autoHeight:

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

一起：

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

Stolen from here

【讨论】：

【解决方案2】：

我所做的恰恰相反。在调用加载之前，我会为页面设置动画以滚动到顶部。

这样任何新动态内容的顶部始终可见。

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

【讨论】：

【解决方案3】：

您可以在load() 之前隐藏#my_div，然后在完整函数中隐藏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();
});

【讨论】：