jQuery Effects

Many effects are made easy with jQuery:

Hiding and Showing

hide
Hides an html element, for example:

$('menu_sub').hide();

show
Shows an html element:

$('menu_sub').show();

toggle
Switches and elements display — if hidden, it displays it, if it\’s currently displayed, it hides the element.

$('menu_sub').toggle();

fadeIn
In the code below, the ‘500’ is the speed in milliseconds for the fade in to occur. Specifying the speed is optional.

$('menu_sub').fadeIn(500);

fadeOut
In the code below, the ‘500’ is the speed in milliseconds for the fade out to occur. Specifying the speed is optional.

$('menu_sub').fadeOut(500); 

fadeToggle
In the code below, the ‘500’ is the speed in milliseconds for the fade out to occur. Specifying the speed is optional.

$('menu_sub').fadeToggle(500);

slideDown
In the code below, the ‘500’ is the speed in milliseconds for the fade out to occur. Specifying the speed is optional.

$('menu_sub').slideDown(500);

slideUp
In the code below, the ‘500’ is the speed in milliseconds for the fade out to occur. Specifying the speed is optional.

$('menu_sub').slideUp(500);

slideToggle
In the code below, the ‘500’ is the speed in milliseconds for the fade out to occur. Specifying the speed is optional.

$('menu_sub').slideToggle(500);

animate
Allows changing any property of an element that accepts a numeric value.

Calling Multiple Effects

To call multiple effects, just line them call them all on one line. Each will wait for the previous effect to finish before beginning:

$('#myphoto').fadeIn(1000).fadeDelay(3000).fadeOut(1000);