Join us Now |  Forgot Password? | Forgot UserName?


Learn step by step

Custom Effects with .animate()

The jQuery makes it possible to animate arbitrary CSS properties via the .animate() function. Function .animate() let us animate to a value relative to the current value, or to a set value.

// for custom effects with .animate()
$( "div.funtimes" ).animate({
left: "+=50",
opacity: 0.25
300, // Duration
// Callback when animation is finished
function() {
console.log( "done!" );

Definition: Easing describes the manner in which an effect occurs - whether the rate of change is fixed, or varies over the duration of the animation. The jQuery includes only two methods of easing: swing and linear. If we want more natural transitions in our animations, various easing plugins are available.

// Per-property easing
$( "div.funtimes" ).animate({
left: [ "+=50", "swing" ],
opacity: [ 0.25, "linear" ]
}, 300 );

Related Videos