Jquery softens the swing liner to control the speed at different points in the animation

  • 2020-03-30 03:09:19
  • OfStack

The jQuery effects functions (slideUp(), fadeIn(), etc.), and the animation() functions all receive another parameter that controls the speed of the animation process. This is easing, which determines the speed at different points in the animation process. For example, moving an element across a page might cause the element to start moving slowly, then quickly, and then slow down again as the animation completes. Add slow motion to the animation to make it visually more interesting and more dynamic.

JQuery contains only two methods for easing: swing and linear. The linear approach provides a stable animation so that each step of the animation is the same (for example, if you want an element to move through the screen in a gradually changing manner, each step is the same distance as the previous step). Swing is a little more dynamic, getting a little faster as the animation starts, and then slowing down. Swing is a common setting, so jQuery USES swing methods if you don't specify any easing.

The easing method is the second parameter for any jQuery effect, so to use linear's method to slide an element out of sight, you can write the following code:
 
$('#element'). slideUp(1000 . 'linear') ;  

When using the animate() function, the easing method is the third parameter. The second parameter is the overall speed of the animation. For example, to use linear's method of easing animation code, write code like this:
 
$('#message').animate( 
{ 
left : '650px' .  
opacity : .5 .  
fontSize : '24px' 
} .  
1500 .  
'linear' 
) ;  

However, it is not limited to the two easing methods provided by jQuery. A number of other easing methods can be added using the jQuery plug-in.

Related articles: