jQuery Effects examples

Here is a collection of examples for jQuery effects.  The jQuery Effects library is documented here. These examples are compatible with WordPress.

.fadeIn, .fadeOut, and .fadeTo

jQuery("#exampleLorem").fadeIn('slow');
jQuery("#exampleLorem").fadeOut('slow');
jQuery("#exampleLorem").fadeTo('slow', 0.5);

First is the .fadeIn method. The script for this is amazingly simple. First, create an HTML element with an id. Then use jQuery to select the element and call the .fadeIn method. Using .fadeIn(“slow”) gives a nice transition. Since this is a WordPress blog (and I hope some other WordPress’ers are reading this 😉 ), I have used a WordPress compatible convention of not using $, instead just use the jQuery object.

For example, fade in the paragraph below

Or, fade the paragraph to 0.5 transparency using .fadeTo. Notice if you use the .fadeIn example above after fading to a semi-transparent element, that the element stays semi-transparent. To “fix” this, you can use .fadeTo to fade back to opaque by calling .fadeTo(1.0).

.fadeToggle

The .fadeToggle function will alternate between a shown and hidden element.

.slideDown and .slideUp

jQuery("#exampleLorem2").SlideDown('slow');
jQuery("#exampleLorem2").SlideUp('slow');

The .slideDown function will slide down an element.