jQuery对属性更改进行动画处理

jQuery animate on property change

本文关键字：动画 处理 属性 jQuery      更新时间：2023-09-26

我有div或其他一些元素，我用将内容加载到这些元素中

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

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

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

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

这里有一些Fiddle

当您想用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);

从这里偷走

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

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

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

您可以在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();
});
相关文章：