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.

Related question: http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height — Stryner, Sep 22 '15 at 13:16
You're not using `jQuery.animate`. Actually, you need `CSS transitions` — romuleald, Sep 22 '15 at 13:17
You might need to add jquery-ui library to get some nice easing — freedomn-m, Sep 22 '15 at 13:19

joyBlanks · Answer 1 · 2015-09-22T13:28:31.687

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>

Add easing to jquery function

1 Answers1

CSS Transition

transition: delay duration property timing-function;