jQuery includes a number of effects, which are small animations that are easy to implement. Today we’ll be covering functions that will allow you to hide elements and show hidden elements by “collapsing” them to the top-left corner of the element.

There are three functions that we’ll be looking at: hide, show and toggle. All three of these function share the same syntax. Let’s take a look at the syntax:

[javascript]hide([speed], [callback])[/javascript]

speed – the speed you want the animation to execute at. Can either be slow, normal, fast or the number of milliseconds for the animation to run for. Defaults to normal. Optional.

callback – a callback function to be executed when the function has finished executing. Passes no parameters. Optional.

Remember, the syntaxes for these three functions are identical. The only difference between these functions is what they do. hide() will hide the element, show() will show a hidden element (hidden either by your CSS or Javascript) and toggle() will toggle the current status of the element (if it’s hidden it will show it and vice versa). To use these functions, you need to bind them to an element.

Let’s take a look at a few examples of these functions in action:

[javascript]$("button").click(function(){
$("#content").toggle(‘slow’);
});[/javascript]

When a <button> is clicked, toggle the visibility of the #content element

[javascript]$("img").hover(function() {
$("#img-hover").show(‘fast’);
},
function() {
$("#img-hover").hide(‘slow’);
});[/javascript]

When the user hovers their mouse over an <img> show #img-hover, when they move their mouse off, hide #img-hover.