jQuery Animation Effects

Fade animation

Fading is one of the most commonly used animation in webpages. jQuery offers four types of fading animations, they are:

fadeIn(): The element is initially hidden and then made visible to user.

fadeOut(): The element is initially visible and then hidden from the view.

fadeToggle(): This is used to switch between fadeIn and fadeOut.

fadeTo(): This is used to specify how much the element should fade (opacity).

Check out the usage of Fade animation at [Codepen.io](Usage: https://codepen.io/anon/pen/EmRYRo). Fork the pen and play with the animation effects.

Slide Animation

Slide is again another commonly used animation. There are three built in slide animation:

• slideUp()

• slideDown()

• slideToggle()

Check out the Usage of slide annimation at codepen.io

stop() Method

In case you want an animation to stop in the middle of execution this method can be used.

delay() Method

You can also use multiple effects to a single element. They will be executed in a queue fashion. To add time interval between two effects in a queue, this method can used.

Usage: $( "div" ).slideUp( 500 ).delay( 600 ).fadeIn( 300 );

Animate()

On top of ready to use animations, jQuery allows creating your own animation using animate() method

Usage : $(selector).animate({parameter},animationSpeed,callbackMethod);

• parameter is mandatory and mentions the css property that has to be animated.

• animationSpeed method is optional and takes values like slow, fast, or milliseconds.

• callbackMethod is optional and specifies the function that has to be executed after the animation ends.

You can also manipulate multiple css properties at a time. Just call multiple animate() methods and jQuery will execute them in queue fashion.

Relative values for css properties can also be used. e.g: to increase the height by 10px relative to existing height, then use height+=10px.

Plugins

Plugins are javascript files that contain methods that perform specific task. Although jQuery is very easy to use and has a lot of built-in methods, these plugins are real stuff that adds cream to the cake.

• They are the results of contribution by a large community of users.

• To use the plugin, download the plugin .js file and add it in script tag just like the jQuery library.

• You can also create your own plugin. Follow this guide to create your own jQuery plugin:

Create jQuery plugin

• You can find the jQuery plugin repository at:

jQuery-plugins