jQuery Web Page Design Tutorials

jQuery Animation and Effect Tutorial (Part 1)

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.

jQuery Video Tutorial

Goal of jQuery 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

jQuery animation and effect

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:

jQuery syntax of hide method

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:

jQuery syntax of show method

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);