向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>