首页 >web前端 >css教程 >如何在 jQuery 中将 Div 从固定高度动画到自动高度?

如何在 jQuery 中将 Div 从固定高度动画到自动高度?

Patricia Arquette
Patricia Arquette原创
2024-12-06 14:19:12373浏览

How to Animate a Div from a Fixed Height to Its Auto Height in jQuery?

如何在 jQuery 中将元素动画到其自动高度

当尝试为

制作动画时使用 jQuery 从固定高度到自动高度,一些用户可能会遇到困难。以下是针对此挑战的解决方案:

提供的代码:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

遇到问题,因为浏览器不会以动画方式将高度从固定值更改为“自动”。

要实现所需的动画,请按照以下步骤操作:

  1. 保存当前高度:
var curHeight = $('#first').height();
  1. 暂时将高度设置为“自动”:
$('#first').css('height', 'auto');
  1. 获取汽车height:
var autoHeight = $('#first').height();
  1. 恢复当前高度并动画到自动高度:
$('#first').height(curHeight).animate({height: autoHeight}, 1000);

这个解决方案之所以有效,是因为它首先检索当前高度,允许浏览器在设置为时确定其最终高度“自动。”

以上是如何在 jQuery 中将 Div 从固定高度动画到自动高度?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn