javascript - 向 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() 但它在“自动”上不起作用。

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

Answer 1

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

CSS Transition

transition: delay duration property timing-function;

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

• ease - 指定先慢后快的过渡效果，然后慢慢结束(这是默认的)
• linear - 指定从开始到结束速度相同的过渡效果
• ease-in - 指定一个缓慢开始的过渡效果
• ease-out - 指定一个缓慢结束的过渡效果
• ease-in-out - 指定开始和结束缓慢的过渡效果
• cubic-bezier(n,n,n,n) - 让您在 cubic-bezier 函数中定义自己的值

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>