Javascript 使用平滑动画在单击时展开div

我正在尝试用速度/平滑动画扩展div。 现在div随着突然的变化而扩展，我的要求是在扩展时提供平滑的动画

小提琴代码：

---

我认为您需要的是将切换处理程序更改为

fadeIn（）

或

fadeOut（）

在括号中，定义转换的时间（我认为默认值为ms）

这是在处理元素。要处理类，fiddle上的代码可能会与一些css3转换一起工作，但由于浏览器兼容性，这可能不是最佳做法：

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;

---

这是一个针对现代浏览器的css解决方案。（IE10及以上）

document.querySelector（'a'）。addEventListener（'click'，function（）{
document.querySelector（'.smalldesc'）.classList.toggle（'expand'）；
});
.smalldesc{
最大高度：52px；
溢出：隐藏；
过渡：全部。3秒轻松；
}
.smalldesc.expand{
最大高度：250px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着
像Aldus PageMaker这样的桌面出版软件包括Lorem Ipsum的版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时
这位不知名的印刷工拿起一个铅字厨房，把它拼凑成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代开始流行
包含Lorem Ipsum段落的Letraset表单的发布，以及最近使用的桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

您要查找的可能是JQueryUI ToggleClass API中定义的“easing”参数：


还可以使用toggle类指定一个持续时间。这应该是你要找的

编辑：此方法要求加载JQuery UI

我更新了您的小提琴，为toggleClass添加了JQuery UI和一个额外的小参数：

我为您提供了一些解决方案，但在这种情况下，您不能将HIGHT设置为auto，您可以执行以下操作，将jquery代码替换为以下代码：-

$('.click1').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Hide Content":"Read More");

    $(this).closest('.click1').find('.smalldesc, .bigdesc').animate({
        "height": "400px"
    }, "slow");  
});

它可能会对您有所帮助。
CSS规范没有定义将元素的高度或宽度从绝对值设置为自动的方法。这是因为在执行扩展动画时，浏览器无法轻松/廉价地计算
auto
的实际值

大多数涉及
auto
的扩展或收缩动画都依赖于Javascript。他们所做的是将高度或宽度设置为
auto
，然后获取新元素高度并使用获得的值应用动画

我已经更新了您的JSFIDLE，以显示我告诉您的内容
 请参见jquery
animate（）
或css transitionmadalin谢谢。这是一个很好的解决方案，我已经检查了jquery animate（），但我对jquery函数不太熟悉，所以你能帮助我如何将切换添加到同一个animate（）函数中吗？请看这个演示是使用完全接受的解决方案：我的基于微积分的物理教科书的长度
jquery.animate（）
，只是一个单线解决方案。我不认为她已经使用了jqueryUiShe的jquery，使用jquery UI不会太长，还会提供很多其他有用的选项。。原始帖子没有将纯javascript或css解决方案指定为针线，只是加载一个大小为几kb的库来制作一个div动画。那么为什么要使用jquery呢？你在挑选细节，加载库并不像56k波特时代那样邪恶。。我只是提供了一个与OP发布的现有代码非常匹配的选项，这是对JQuery的toggleClass方法的扩展，OP将其用于她的方法。如果一个web开发人员已经开始使用JQuery，现在正在制作div动画，那么他们可能会更进一步，这样我们就可以加载额外的几KB，并获得一个有良好文档记录的API和易于使用的工具包。我正在尝试切换，但没有得到相同的结果。是的，这些小提琴的例子很有效。但在我的实际HTML中仍然没有得到相同的结果。可能是因为其他问题。我查一下。非常感谢。谢谢。使用CSSI对我来说很容易。我无法理解这个问题。我无法固定div高度。它在响应性方面产生了问题。不想为每个分辨率的高度添加媒体查询您的意思是“最大高度：250px；”250px还不够？@Sharanpreet如果这回答了你的问题，请给出答案，这样对其他人会有帮助。
。animate（）
是一个单线呼叫！多好的解决方案啊！我真不敢相信，我四年级的微积分物理课上，公认的答案竟然和课本上的一样长。谢谢
$('.click1').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Hide Content":"Read More");
$(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc', 1000, 'swing');});

$('.click1').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Hide Content":"Read More");

    $(this).closest('.click1').find('.smalldesc, .bigdesc').animate({
        "height": "400px"
    }, "slow");  
});