向jQuery函数添加缓动

Question

如何使此jQuery函数平滑过渡（平滑调整高度）？

我不确定在哪里添加它。

jQuery('#my-button').click(function() {
    if (jQuery('#my-button').height() < 100) {
        jQuery('#my-button').css("height","auto");  
    }
    else {
        jQuery('#my-button').css("height","56px");
    } 
});

我尝试使用animate（），但在'auto'上不起作用。

我不能使用固定高度，因为它需要对其他设备进行文本响应。

Answer 1

您可以使用CSS转换，然后只使用相同的代码即可。

CSS过渡

过渡：延迟持续时间属性计时功能；

transition-timing-function属性指定过渡效果的速度曲线，并可以具有以下值：

• ease-指定过渡效果时，先以慢速开始，然后是快速，然后缓慢地结束（默认设置）
• 线性-从开始到结束以相同的速度指定过渡效果
• 缓入-以缓慢的开始指定过渡效果
• 缓和-指定过渡效果并缓慢结束
• 缓入-指定过渡效果的起点和终点较慢
• cube-bezier（n，n，n，n）-让您在三次贝塞尔函数中定义自己的值

 jQuery('#my-button').click(function(){ if (jQuery('#my-button').height() < 100) { jQuery('#my-button').css("height","auto"); } else{ jQuery('#my-button').css("height","56px"); } }); 

 #my-button{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; -ms-transition: all 500ms linear; transition: all 500ms linear; border: 1px solid #ccc; width: 200px; height:200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my-button">Hello Button</div>