jQuery Animation and Effect Tutorial (Part 2)

We learned how to hide and show elements in previous jQuery tutorial. Let's learn more interesting jQuery animation and effect in this tutorial.

jQuery Animate Opacity of Element

This is very easy to animate or control the opacity of elements with jQuery codes. The most basic syntax of animating the opacity of an element is:

Value of Opacity Vs Transparency

The degree of transparency of an element is controlled by the value of opacity:

• Opacity = 1 (The element is fully opaque)
• Opacity = 0 (The element is fully transparent or totally invisible)

This can be shown in the diagram below:

Example:

The following jQuery codes will animate the opacity of cloud element from 1 (i.e. fully opaque) to 0 (i.e. fully transparent or fully invisible) in 5000 milliseconds (5 seconds) when the Cloud Opacity button is clicked.

Tips:

• The Duration is an optional parameter, i.e.
  $("#cloud").animate( {"opacity": "0"});
  also works


• The Duration parameter can also use "slow", "fast", "normal" or given in milliseconds, i.e.
  $("#cloud").animate( {"opacity": "0"}, "slow");


• The jQuery animate() Method can also take a callback parameter. The callback parameter is the function to be called or executed after the hide function is completed.
  

  $(Selected Element).animate({""opacity": "0"}, Duration, callback);

jQuery Callback Example

The jQuery Callback parameter is very useful when you need to do something after the animation is complete. The following is an example of callback. An alert box with the message "Animation completed! The cloud is fully transparent now!" will be pop up after the animation is completed.

The callback parameter can also be written as below. Actually most web designers are using this way:

jQuery Animation and Effect Tutorial: Part 1 | Part 2 | Part 3 | Part 4 | Part 5