为 jquery 函数添加缓动答案

【问题标题】：Add easing to jquery function为 jquery 函数添加缓动
【发布时间】：2015-09-22 13:15:10
【问题描述】：

如何让这个 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()，但它不适用于“自动”。

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

【问题讨论】：

相关问题：stackoverflow.com/questions/5003220/…
你没有使用jQuery.animate。其实你需要CSS transitions
您可能需要添加 jquery-ui 库来获得一些不错的缓动效果

标签： javascript jquery css jquery-animate transition

【解决方案1】：

您可以使用 CSS 过渡，然后您的相同代码应该可以正常工作。

CSS 过渡

transition：延迟持续时间属性计时函数；

transition-timing-function属性指定转场效果的速度曲线，可以有以下值：

ease - 指定一个先慢后快的过渡效果，然后慢慢结束（这是默认设置）
linear - 指定从开始到结束速度相同的过渡效果
ease-in - 指定缓慢启动的过渡效果
ease-out - 指定一个缓慢结束的过渡效果
ease-in-out - 指定具有缓慢开始和结束的过渡效果
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>

【讨论】：