JQUERY: Effects

Effects


One of the big appeals of JQuery is the ability to easily create animations within a web page. The following effects can be applied to a variety of elements:
JQuery effects are called from a selector, just like other actions. For example, to make a div with id='showme' fade in, we write: 
$('#showme').fadeIn();

The effect methods are overloaded to also accept an optional speed parameter. When choosing a speed parameter, there are three text options (slow, medium, fast) OR the speed can be specified in milliseconds. 
$('#showme').fadeIn('slow');
$('#showme').fadeOut(3000);

In addition, each pair of effects has a third method that will alternate, or toggle, between the states. Any action that calls the toggle method on an element will do the opposite. If the element is visible, it will become hidden (and vice-versa). The toggle methods also accept the optional speed parameter.

The final effect that can be applied is animation. Animation allows a programmer to animate an element in a variety of ways. Animate allows for almost any CSS style to be altered, including size, location and opacity. The major exception is color. To animate through colors, there is a plug in that needs to be included. When we call animate, a comma separated list of styles in curly braces is sent as the parameter. All style names should be written in camelcase, as opposed to the CSS based dashes. 
$('#moveme').animate({
	left:'250px',
	top:'+=150px',
	opacity:'0.5',
	height:'50px',
	width:'200px'
});

Note: if any location properties are to be changed, the original element MUST have a position (absolute/relative) style assigned. Also, following the curly braces, an optional speed parameter may be added.

Finally, events on the same element can be chained in the same call to save time. 
$('#showme').fadeOut().delay(1500).slideDown('slow');