jQuery UI Easing

To define the rate of change of a parameter concerning time, the jQueryUI Easing function is used. Linear, swing, etc are different types of easing functions in jQuery. Depending on the properties being animated, easing often provides negative value results during the animation.

To choose easing functions:

  • CSS: To pick easing functions, the CSS properties transition and animation facilities can be utilised, but with the limitation that they don’t support all easing functions. Thus, the desired easing functions may be needed to be specified by the user himself. For example, the Bezier curve.
  • SCSS: To describe animation, the Sass/SCSS can be used. To remove the prefixes before the transition and animation properties, the Compass can be utilised, and to pass the easing function by name, the Compass Ceaser Plugin facilitates can be used.
  • Jquery Easing Plugin: The easiest way to describe animation with easing is the jQuery with the jQuery Easing Plugins.

Example:

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Effects - Easing demo</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="/resources/demos/style.css">  
  <style>  
  .graph {  
    float: left;  
    margin-left: 60px;  
  }  
  </style>  
  <script>  
  $(function() {  
    if ( !$( "<canvas>" )[0].getContext ) {  
      $( "<div>" ).text(  
        "Browser doesn't support canvas required for the demo."  
      ).appendTo( "#graphs" );  
      return;  
    }  
  var i = 0,  
      width = 50,  
      height = 50;  
 $.each( $.easing, function( name, impl ) {  
      var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),  
        text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),  
        wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),  
        canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];  
  canvas.width = width;  
      canvas.height = height;  
      var drawHeight = height * 0.9,  
        cradius = 10;  
        ctx = canvas.getContext( "2d" );  
      ctx.fillStyle = "black";  
 // draw background  
      ctx.beginPath();  
      ctx.moveTo( cradius, 0 );  
      ctx.quadraticCurveTo( 0, 0, 0, cradius );  
      ctx.lineTo( 0, height - cradius );  
      ctx.quadraticCurveTo( 0, height, cradius, height );  
      ctx.lineTo( width - cradius, height );  
      ctx.quadraticCurveTo( width, height, width, height - cradius );  
      ctx.lineTo( width, 0 );  
      ctx.lineTo( cradius, 0 );  
      ctx.fill();  
 // draw bottom line  
      ctx.strokeStyle = "#555";  
      ctx.beginPath();  
      ctx.moveTo( width * 0.1, drawHeight + .5 );  
      ctx.lineTo( width * 0.9, drawHeight + .5 );  
      ctx.stroke();  
// draw top line  
      ctx.strokeStyle = "#555";  
      ctx.beginPath();  
      ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );  
      ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );  
      ctx.stroke();  
 // plot easing  
      ctx.strokeStyle = "white";  
      ctx.beginPath();  
      ctx.lineWidth = 2;  
      ctx.moveTo( width * 0.1, drawHeight );  
      $.each( new Array( width ), function( position ) {  
        var state = position / width,  
          val = impl( state, position, 0, 1, width );  
        ctx.lineTo( position * 0.8 + width * 0.1,  
          drawHeight - drawHeight * val * 0.7 );  
      });  
      ctx.stroke();  
 // animate on click  
      graph.click(function() {  
        wrap  
          .animate( { height: "hide" }, 1000, name )  
          .delay( 1000 )  
          .animate( { height: "show" }, 1000, name );  
      });  
 graph.width( width ).height( height + text.height() + 10 );  
    });  
  });  
  </script>  
</head>  
<body>  
 <div id="graphs"></div>  
 </body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are defining the different types of easing functions.

Please Share