CODEWITHSUNDEEP
javascriptjquerycssjquery-animatetransition
jord49
jord49

Reputation: 582

Add easing to jquery function

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.

Upvotes: 1

Views: 444

Answers (1)

Joy Biswas
Joy Biswas

Reputation: 6527

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>

Upvotes: 1

Related Questions