jQuery Animations

jQuery includes methods which give special effects to the elements on hiding, showing, changing style properties, and fade-in or fade-out operation. These special effect methods can be useful in building an interactive user interface.

The following table lists jQuery methods for adding special effects to the DOM elements.

jQuery Methods for Special Effects	Description
animate()	Perform custom animation using element's style properties.
queue()	Show or manipulate the queue of functions to be executed on the specified element.
stop()	Stop currently running animations on the specified element(s).
fadeIn()	Display specified element(s) by fading them to opaque.
fadeOut()	Hides specified element(s) by fading them to transparent.
fadeTo()	Adjust the opacity of the specified element(s)
fadeToggle()	Display or hide the specified element(s) by animating their opacity.
hide()	Hide specified element(s).
show()	Display specified element(s).
toggle()	Display hidden element(s) or hide visible element(s).
slideUp()	Hide specified element(s) with sliding up motion.
slideDown()	Display specified element(s) with sliding down motion.
slideToggle()	Display or hide specified element(s) with sliding motion.

Let's look at some important methods for special effects.

jQuery animate() Method

The jQuery animate() method performs custom animation using element's style properties. The animate() method changes existing style properties to the specified properties with motion.

Specify a selector to get the reference of an element to which you want to add animation effect and then call animate() method with JSON object for style properties, speed of animation and other options.

Syntax:

$('selector expression').animate({ stylePropertyName : 'value'},
                                duration,
                                easing, 
                                callback);

$('selector expression').animate({ propertyName : 'value'},{ options });

Apply Animation

In the following example, we are changing height and width of the element with animation.

Example: jQuery animate() Method

$('#myDiv').animate({
                height: '200px',
                width: '200px'
            });

<div id="myDiv" className="redDiv">
</div>

Try it

Set Animation Duration

You can apply animation duration in miliseconds as a second parameter of animate() method.

Example: Set Duration

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    },
                    5000);

<div id="myDiv" className="redDiv">
</div>

Try it

Apply Easing Method

Specify a string parameter indicating which easing function to use for the transition. The jQuery library provides two easing function: linear and swing.

Example: Apply Easing Method

$('#myDiv').animate({
            height: '200px',
            width: '200px'
        },
        5000, 'swing');

<div id="myDiv" className="redDiv">
</div>

Try it

Callback Function on Animation Complete

Specify a callback function to execute when animation is complete.

Example: Specify Callback Function

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    },
                    5000,
                    function () {
                        $('#msgDiv').append('Animation completed');
                    });
        });

<div id="myDiv" className="redDiv">
</div>

<div id="msgDiv"></div>

Try it

Specify Animation Options

You can specify various options as JSON object. The options include duration, easing, queue, step, progress, complete, start, done and always. Visit api.jquery.com for more information.

Example: Specify Options

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    }, 
                    {    // options parameter 
                        duration: 5000,
                        complete: function () {
                            $(this).animate({
                                height: '100px',
                                width: '100px'
                            }, 5000,
                            function () {
                                $('#msgDiv').text('Animation completed..');
                            });
                        },
                        start: function () {
                            $('#msgDiv').append('starting animation..');
                        }
                    });


<div id="msgDiv"></div>

<div id="myDiv" className="redDiv">
</div>

Try it

jQuery queue() Method

The jQuery queue() method shows or manipulates the queue of special effect functions to be executed on the specified element.

Syntax:

$('selector expression').queue();

Example: jQuery queue() Method

$('#myDiv').toggle(500);
$('#myDiv').fadeOut(500);
$('#myDiv').fadeIn(500);
$('#myDiv').slideDown(500);
$('#msgDiv').append('Animation functions: ' + $('#myDiv').queue().length);

<div id="msgDiv"></div>

<div id="myDiv" className="redDiv">
</div>

Try it

jQuery fadeIn() Method

The jQuery fadeIn() method displays specified element(s) by fading them to opaque.

Syntax:

$('selector expression').fadeIn(speed, easing, callback);

Example: jQuery fadeIn() Method

$('#myDiv').fadeIn(5000, function () {
            $('#msgDiv').append('fadeIn() completed.')
        });

<div id="myDiv" className="redDiv">
</div>

<div id="msgDiv"></div>

Try it

jQuery fadeOut() Method

The jQuery fadeOut() method hides specified element(s) by fading them to transparent.

Syntax:

$('selector expression').fadeOut(speed, easing, callback);

Example: jQuery fadeOut() Method

$('#div1').fadeOut(5000, function () {
            $('#msgDiv').append('fadeOut() completed.')
        });

<div id="msgDiv"></div>

<div id="myDiv" className="redDiv">
</div>

Try it

jQuery hide() and show() Method

The jQuery hide() method hides and show() method displays the specified element. You can specify speed, easing and callback function which will be executed when hide/show completes.

Syntax:

$('selector expression').hide(speed, easing, callback); $('selector expression').show(speed, easing, callback);

Example: jQuery hide() & show() Methods

$('#div1').hide(500, function () {
                    $('#msgDiv').append('Red div is hidden.')
                });

$('#div2').hide(500, function () {
                    $('#msgDiv').append('Yellow div is hidden.')
                });

<div id="div1" className="redDiv">
</div>

<div id="div2" className="yellowDiv">
</div>

Try it

jQuery toggle() Method

The jQuery toggle() method hides or displays specified element(s).

Syntax:

 $('selector expression').toggle(speed, easing, callback)

Example: jQuery toggle() Method

$('#myDiv').toggle(500, function () {
        $('#msgDiv').append('fadeOut completed.')
    });

<div id="myDiv" className="redDiv">
</div>

Try it

Visit animation methods reference to know about all the animation methods in jQuery.