关于属性更改的 jQuery 动画

Posted 2023-05-08

【中文标题】关于属性更改的 jQuery 动画

【英文标题】：jQuery animate on property change

【发布时间】：2013-08-15 00:54:44

【问题描述】：

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

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

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

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

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

【参考方案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();
);