While trying to create animations with jQuery I noticed that there are short delays between each couple of animations.
After reading on the subject it seems there’s an easing parameter which defines the animation behavior over time. From the jQuery site:
Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
Per-property Easing
As of jQuery version 1.4, you can set per-property easing functions within a single .animate() call. In the first version of .animate(), each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the .animate() method’s optional easing argument. If the easing argument is not defined, the default swing function is used.
From w3schools:
easing:Optional. Specifies the speed of the element in different points of the animation. Default value is “swing”. Possible values:
“swing” – moves slower at the beginning/end, but faster in the middle
“linear” – moves in a constant speed
Tip: More easing functions are available in external plugins.
Sample code:
|
1 2 3 4 5 |
$("#myImg").css({top: 0, left: 0}) .animate({top:100, left: 0 }, 1000, 'linear') .animate({top:100, left: 100}, 1000, 'linear') .animate({top:0, left: 100}, 1000, 'linear') .animate({top:0, left: 0 }, 1000, 'linear'); |