Add easing to jquery function

Question

How can I make this jQuery function a smooth transition (adjust height smoothly)?

I'm not sure where to add it in.

jQuery('#my-button').click(function() {
    if (jQuery('#my-button').height() < 100) {
        jQuery('#my-button').css("height","auto");  
    }
    else {
        jQuery('#my-button').css("height","56px");
    } 
});

I have tried using animate() but it won't work on 'auto'.

I can't use a fixed height as it needs to be text responsive for other devices.

Answer 1

You can use CSS transitions and then just your same code should work as it is.

CSS Transition

transition: delay duration property timing-function;

The transition-timing-function property specifies the speed curve of the transition effect and can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

 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>