向jquery函数添加easing

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属性指定过渡效果的速度曲线，可以具有下列值：

三次贝塞尔缓动-指定先是慢启动，然后是快速，然后是慢速结束的过渡效果(这是default)

• linear -指定从开始到结束的相同速度的过渡效果)和缓入-指定具有慢start

• ease-out的过渡效果-指定具有慢end

• ease-in-out的过渡效果-指定具有慢启动和end

• cubic-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>

​