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

添加缓动到jquery函数

1 个答案:

CSS转换

转换：延迟持续时间属性定时功能;