jquery easing swing liner controls the speed at different moments of the animation process_jquery

Both the jQuery effect function (slideUp(), fadeIn(), etc.) and the animation() function receive another parameter used to control the speed of the animation process, which is easing, which determines the speed of the animation process at different moments. For example, when moving an element across the page, you might have the element start moving slowly, then become very fast, and finally slow down again as the animation completes. Add easing to animations to make them more visually interesting and dynamic.

jQuery only contains two easing methods: swing and linear. The linear method provides a stable animation so that each step of the animation is the same (for example, if you want an element to move across the screen in a gradually changing manner, each step is the same distance as the previous step). The swing is more dynamic, getting faster at the beginning of the animation and then slowing down. swing is a common setting, so if no easing is specified, jQuery will use the swing method.

For any jQuery effect, the easing method is its second parameter, so to use the linear method to slide an element out of view, you can write the code like this:

Copy code The code is as follows:

$('#element').slideUp(1000,'linear');

When using the animate() function, the easing method is the third parameter. The first parameter is an object literal, which contains the CSS properties we want to animate; the second parameter is the animation. overall speed. For example, to use the linear easing method for animation code, you can write the code like this:

Copy the code The code is as follows:

$('#message').animate(
{
left: '650px',
opacity: .5,
fontSize: '24px'
},
1500,
'linear'
);

However, you are not limited to using the two easing methods provided by jQuery. A range of other easing methods can be added using jQuery plugins.