Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

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!" );
}
);
Easing

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