Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • jQuery - Get Started
  • What is jQuery
  • jQuery - Environment Setup
  • Start using jQuery
  • jQuery - Selectors
  • jQuery - Methods
  • DOM Manipulation
  • Attributes Manipulation
  • Dimensions Manipulation
  • Traversing Elements
  • CSS Manipulation
  • Animation
  • Events
  • AJAX Introduction
  • AJAX Methods
  • Get Method
  • Post Method
  • Load Method
  • Selector Reference
  • DOM Manipulation Methods
  • Traversing Methods
  • Effects Methods
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

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 EffectsDescription
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.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.