Most animation on the Internet are made with Flash. However this is also very easy to do animation and effect with jQuery. With just a very simple line of code, interesting animation and effect can be achieved with jQuery.

Goal of jQuery Animation Tutorial

This jQuery tutorial shows how to do some interesting animation and effect:

  • Hide and show element
  • Change opacity of element
  • Animate or move element left and right
  • Animate or move element up and down
  • Resize element

This should be very fun, Let’s get started right now!

jQuery Hide and Show Element

This is very easy to hide and show elements with jQuery codes.

jQuery hide() Method:

The most basic syntax of jQuery hide() Method is:

Example:

The following jQuery codes will hide the cloud element when the Hide Cloud button is clicked.

$("#hideCloud").click( function(){
$("#cloud").hide(2000);
});

Tips:

  • The Duration is an optional parameter.
  • The Duration parameter can use “slow”, “fast”, “normal” or given in milliseconds
  • The jQuery hide() 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).hide(Duration, callback);

jQuery show() Method:

The most basic syntax of jQuery hide() Method is:

Example:

The following jQuery codes will show the cloud element when the Show Cloud button is clicked.

$("#showCloud").click( function(){
$("#cloud").show(1500);
});

Tips:

  • The Duration is an optional parameter.
  • The Duration parameter can use “slow”, “fast”, “normal” or given in milliseconds
  • The jQuery show() Method can also take a callback parameter. The callback parameter is the function to be called or executed after the show function is completed.
$(Selected Element).show(Duration, callback);

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

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.

$("#opacityCloudShow").click(function() {
$("#cloud").animate( {"opacity": "0"}, 5000);
});

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.



$("#opacityCloudShow").click(function() {
$("#cloud").animate( {"opacity": "0"}, 5000, function() { showComplete() } );
});

function showComplete(){
alert("Animation completed! The cloud is fully transparent now!");
}

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

$("#opacityCloudShow").click(function() {
$("#cloud").animate( {"opacity": "0"}, 5000,
function() { alert("Animation Completed"); }
);
});

We just learned how to hide, show and animate opacity of elements with jQuery. Let’s continue and learn more interesting jQuery animation and effect.

jQuery Animate Element in Horizontal Direction

This is very easy to animate an element in horizontal direction (i.e. left and right) with jQuery codes. Thefollowing is an example of a basic syntax of animating an element in horizontal direction:

Animate Element in Left Direction and Right Direction

By controlling the left position, the selected element can be moved to the right side or left side easily.

  • By increasing the value to the left (+=), the element will animate to the RIGHT.
  • By decreasing the value to the left (-=), the element will animate to the LEFT.

This can be shown in the diagram below:

Example 1:

The following jQuery codes animate the cloud element to the right side by 50 pixels when the Move Cloud to Right button is clicked.

$("#moveCloudRight").click(function() {
$("#cloud").animate( {"left": "+=50px"}, 4000, "linear" );
});

Example 2:

The following jQuery codes animate the cloud element to the left side by 50 pixels when the Move Cloud to Right button is clicked.

$("#moveCloudRight").click(function() {
$("#cloud").animate( {"left": "-=50px"}, 4000, "linear" );
});

Tips:

  • The Duration is an optional parameter. In other words, the following jQuery codes also works:
    $(“#cloud”).animate( {“opacity”: “0”});
  • 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.



$("#opacityCloudShow").click(function() {
$("#cloud").animate( {"opacity": "0"}, 5000, function() { showComplete() } );
});

function showComplete(){
alert("Animation completed! The cloud is fully transparent now!");
}

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

$("#opacityCloudShow").click(function() {
$("#cloud").animate( {"opacity": "0"}, 5000,
function() { alert("Animation Completed"); }
);
});

jQuery Animate Element in Vertical Direction

This is very easy to animate an element in vertical direction (i.e. up and down) with jQuery codes. Thefollowing is an example of a basic syntax of animating an element in vertical direction:

Animate Element Up and Down

By controlling the top position, the selected element can be moved up and down easily.

  • By increasing the value to the top (+=), the element will animate DOWN.
  • By decreasing the value to the top (-=), the element will animate UP.

This can be shown in the diagram below:

Example 1:

The following jQuery codes animate the sun element UP by 30 pixels when the Move Sun Up button is clicked.

$("#moveSunUp").click(function() {
$("#sun").animate( {"top": "-=30px"}, 4000, "linear" );
});

Example 2:

The following jQuery codes animate the sun element DOWN by 30 pixels when the Move Sun Down button is clicked.

$("#moveSunDown").click(function() {
$("#sun").animate( {"top": "+=30px"}, 4000, "linear" );
});

Tips:

  • The Duration is an optional parameter. In other words, the following jQuery codes also works:
    $(“#sun”).animate( {“top”: “+=30px”});
  • The Duration parameter can also use “slow”, “fast”, “normal” or given in milliseconds, i.e.
    $(“#sun”).animate( {“top”: “+=30px”}, “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({"top": "+=30px"}, 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!” will be pop up after the animation is completed.



$("#moveSunDown").click(function() {
$("#sun").animate( {"top": "+=50px"}, 5000, function() { showComplete() } );
});

function showComplete(){
alert("Animation completed!");
}

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

$("#moveSunDown").click(function() {
$("#sun").animate( {"top": "+=50px"}, 5000,
function() { alert("Animation Completed"); }
);
});

jQuery Resize Width and Height of Element

This is very easy to resize or animate the width and height of selected element. This can be achieved by increasing or decreasing the dimension. The following is the basic syntax of animating the height and width of an selected element.

The above jQuery example resize the selected element by increasing the width and height. Another way to resize selected element is to animate the selected element to a specified height and width. The basic syntax of jQuery code is shown below:

Resize Element

The selected element can be resized bigger or smaller

  • By increasing the value of height (+=), the height will animate taller.
  • By decreasing the value of height (-=), the height will animate shorter.
  • By increasing the value of width (+=), the width will animate wider.
  • By decreasing the value of width (-=), the width will animate shorter.

Example 1:

The following jQuery codes resize or animate the frame element by increasing the height by 30 pixels and increasing the width by 40 pixels when the Frame Resize button is clicked.

$("#frameSizeChange").click(function() {
$("#frame").animate( {"height": "+=30px", "width": "+=40px"}, 1000 );
});

Example 2:

The following jQuery codes animate the frame element by setting the height to 270 pixels and the width to 650 pixels when the Frame Resume button is clicked.

$("#frameSizeResume").click(function() {
$("#frame").animate( {"height": "270px", "width": "650px"}, 1000 );
});

Tips:

  • The Duration is an optional parameter. In other words, the following jQuery codes also works:
    $(“#frame”).animate( {“height”: “+=30px”, “width”: “+=40px”});
  • The Duration parameter can also use “slow”, “fast”, “normal” or given in milliseconds, i.e.
    $(“#frame”).animate( {“height”: “+=30px”, “width”: “+=40px”}, “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({"top": "+=30px"}, Duration, callback);

This is the end of jQuery Animation and Effect Tutorial.