Introduction to jQuery Easing
The jQuery easing functions are used to specify the speed at which an animation show at different points within the animation. The jQuery easing functions are built-in functions in the jQuery UI library. In simple words, the jQuery easing functions specify the speed of animation progress. The jQuery provides different types of easing functions ranging from swing behavior to customized effects like bouncing. The jQuery core provides two easing functions linear and swing. The linear progress at a constant speed throughout an animation and the swing progress little slowly at the beginning and end of an animation compare to the middle of an animation, this is the default easing function of the jQuery core.
Even some of the easing function returns a negative value during an animation based on the animation properties, because the actual value may be clamped at zero like left animate value can be animate to negative, but opacity or height can not be animate the negative value.
Syntax
The jQuery easing functions are usually passed to the animation function, so the syntax of animation function is:
(selector).animate( {styles}, speed, easing, callback);
Parameters
- { style }: This is one or more style parameters of CSS properties.
- speed: This parameter specifies the speed of the animation in milliseconds. The default value of it is 400
- easing: This parameter specifies the name of the easing function to be called to the animate() method. The default value of it is “swing”.
- callback: This parameter specifies the name of the function which is to be executed after the animation completed. This is an optional parameter.
List of Easing Functions
There are different types of easing function which are listed as below:
Linear, swing, easeOutQuad, easeInQuad, easeInOutQuad, easeOutCubic, easeInCubic, easeInOutCubic, easeOutQuart, easeInQuart, easeInOutQuart, easeOutQuint, easeInQuint, easeInOutQunit, easeOutExpo, easeInExpo, easeInOutExpo, easeOutSine, easeInSine, easeInOutSine, easeOutCirc, easeInCirc, easeInOutCirc, easeOutElastic, easeInElastic, easeInOutElastic, easeOutBack, easeInBack, easeInOutBack, easeOutBounce, easeInBounce, easeInOutBounce, and RESET.
Choose Easing Functions:
CSS: The properties of CSS for transition and animation allow us to choose an easing function. The CSS does not support all easing functions.
4.5 (9,200 ratings)
View Course
SCSS: The animation can also be provided by Sass or SCSS. The Compass Ceaser Plugin allows us to specify the easing function by its name and Compass removes the prefixes before the transition and animation properties.
Jquery Easing Plugin: the jQuery Easing Plugins is the easiest way to provide animation with easing with the help of jQuery.
Example to Implement jQuery Easing
Next, we write the HTML code to understand the UI easing functions more clearly with the following example, where all different types of easing functions will use to show the style of animation, as below:
Example #1
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery easing function </title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<style>
.img {
float: left;
margin-left: 5px;
}
</style>
<script>
$(function() {
if ( !$( "<canvas>" )[0].getContext ) {
$( "<div>" ).text("Browser does not support canvas." ).appendTo( "#imgs" );
return;
}
$.each( $.easing, function( easingtype, impl ) {
var img = $( "<div>" ).addClass( "img" ).appendTo( "#imgs" ),
wrap = $( "<div>" ).appendTo( img ).css( 'overflow', 'hidden' ),
text = $( "<div>" ).text( easingtype ).appendTo( img ),
c = $( "<canvas>" ).appendTo( wrap )[ 0 ];
w = 100,
h = 100;
cradius = 9;
c.w = w;
c.height = h-10;
var drawHeight = h * 0.7,
ct = c.getContext( "2d" );
ct.fillStyle = "orange";
// bottom line drawing
ct.beginPath();
ct.strokeStyle = "#566";
ct.moveTo( w * 0.1, drawHeight + .3 );
ct.lineTo( w * 0.9, drawHeight + .3 );
ct.stroke();
// background drawing
ct.beginPath();
ct.moveTo( cradius, 0 );
ct.quadraticCurveTo( 0, 0, 0, cradius );
ct.lineTo( 0, h - cradius );
ct.quadraticCurveTo( 0, h, cradius, h );
ct.lineTo( w - cradius, h );
ct.quadraticCurveTo( w, h, w, h - cradius );
ct.lineTo( w, 0 );
ct.lineTo( cradius, 0 );
ct.fill();
// easing
ct.strokeStyle = "red";
ct.beginPath();
ct.lineWidth = 2;
ct.moveTo( w * 0.1, drawHeight );
$.each( new Array( w ), function( position ) {
var state = position / w,
val = impl( state, position, 0, 1, w );
ct.lineTo( position * 0.7 + w * 0.1,
drawHeight - drawHeight * val * 0.8 );
});
ct.stroke();
img.width( w ).height( h + text.height() + 12 );
// specific easing type animate on image click
img.click(function() {
wrap
.animate( { height: "hide" }, 1500, easingtype )
.delay( 600 )
.animate( { height: "show" }, 1500, easingtype );
});
});
});
</script>
</head>
<body>
<div id = "imgs"></div>
</body>
</html>
Output:
Explanation: As in the above program all different types of easing functions are applicable to the different images (as the names are mention below) by writing the line of code “.animate( { height: “hide” }, 1500, easing type )”, where the easing type is the easing functions. Once we click on the particular image we can see the animation with that easing function.
Conclusion
The easing functions are built-in functions that are defined in jQuery UI library and they are used to specify the speed at which an animation show at different points within the animation. There are different types of easing type functions that change the speed at a different location throughout the animation as we have seen through the example.
Recommended Articles
This is a guide to jQuery Easing. Here we discuss an introduction to jQuery Easing, the syntax , parameters with programming examples. You can also go through our other related articles to learn more –
