Question

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

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

然而，div的高度会发生变化，导致页面上下跳跃，看起来很难看。

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

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

Answer 1

Here's some Fiddle

如果要使用jQuery创建高度或宽度动画，则必须设置一个表示所需大小的数字。我假设您在这种情况下使用height：auto，因此您必须找到一点workarround。

获得高度：

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

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

jQuery动画更改属性

3 个答案: