Jquery animate function Tutorial

Let us break down the jquery animate function.

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties A set of CSS properties ,on which the animation will be created

duration A string or number which will calculate the longivity of the animation(optional)

easing A string determining the easing function to use for the transition.(optional)

callback A function to call when the animation is done.(optional)

Take a note that only the first parameter is the minimum requirement.

let's be practical now. I'll use an example from jquery.com

If you click on the arrow button. the colored div will move. Let's look at the code.

$("#test22").click(function(){
$("#test222").animate({"left": "+=50px"}, "slow");
});

$("#test2").click(function(){
$("#test222").animate({"left": "-=50px"}, "slow");
});


Here I've used only two parameters first and the duration parameter. we will continue the animate function in the next post using the easing and callback function