jQuery Animate Method

In the previous paragraphs, we looked at special methods that control the element’s height, transparency, and visibility. However, these methods do not cover all needs for creating effects and animation. Often, more complex animations are required. And here the method helps us animate().

The method animate()accepts a set of element properties, which are then modified to achieve the animation.

This method has the following usage form:animate(properties [,duration] [,easing] [,complete])

The required parameter properties contain a set of CSS properties that have final values.

The parameter duration specifies how long it will take to change the transparency of the element. Its default value is 400 milliseconds. You can also use the ‘slow’ and values ‘fast’, which correspond to the effect duration of 600 and 200 milliseconds.

The parameter easing accepts the name of the animation easing function as a string. Its default value is “swing”.

The parameter complete represents the callback function that the method will call when the animation completes.

When using animation, it is important to keep in mind that in this case we can only use css properties that take numeric values, such as width and height. Other properties, such as background or font colors, we simply cannot use.

Let’s apply a simple animation to the image by changing a number of its properties:

<img src="ars.jpg" id="ars" /><br>
<button id="anim">Animation</button>
<script type="text/javascript">
$(function() {
    $('#anim').click(function(){
         $('#ars').animate({ opacity: 0.25,
                'margin-left': '50',
                height: '200'});
    });
});
</script>

In this case, we have three properties that change their value: opacity, margin-left and height. The animation itself represents the transition from the initial values ​​to the values ​​specified for the properties in the animate method.

In the previous example, we hardcoded the final property values. So, the left margin after the animation will have a value of 50. But what if we want the movement to continue continuously when the button is clicked? In this case, we can use relative values:

 
$('#ars').animate({
            'margin-left': '+=50',
            width: '-=10',
            height: '-=10'}, 1000);
    });

In addition to specifying relative values, the animation time is also used here – 1000 milliseconds.

To customize the animation in more detail, we can use another form of the animate method:animate(properties, options)

Here the new parameter is used – options. In this parameter, we can specify the number of configuration parameters that will be used during the animation. This parameter accepts the following options:

• duration: animation duration. The default is 400 milliseconds
• easing: The name of the animation smoothing function. The default value is ‘swing’
• queue: Boolean value indicating whether the animation should be placed in the effects queue. The default value is true, which means that the animation is queued. If set to false, then the animation will run immediately.
• specialEasing: a javascript object that maps animate properties to easing functions
• step: a function to be called for each animable property of each animating element
• progress: a function called once per animation step for each element, regardless of the number of properties being animated
• complete: a function to call after the animation ends
• done: function to be called when the animation ends
• fail: function to be called when an error occurs during the animation if the animation fails to complete normally
• always: function to be called after the animation ends, regardless of whether the animation ends normally or with an error

Of course, it is not necessary to specify all the options at once and you can stop at just a few. For example, let’s use some of these options:

$('#ars').animate({
    'margin-left': '+=50',
    width: '-=10',
    height: '-=10'
    },{
    duration: 1000
    step: function(now, fx) {
        var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
        $('body').append('<div>' + data + '</div>');
    },
    complete: function() {
        alert('Animation completed');
    }
});

Here we have used three options: the duration of the animation and the stepping and finishing functions.

The entire animation process is broken down into a series of small steps that run over a certain amount of time (in this case, 1000 milliseconds). At each stage, the step-by-step processing function ( step: function(now, fx)) is called, and for each animated element of the property is animated. It takes two parameters: now and fx. Now shows the current value at this stage of the property being animated, and fx contains data about the object being animated. As in this case, we get an animated property ( fx.prop) and an animated element ( fx.elem). And then we can use this data at our discretion.