WP-Mix

Here is a simple jQuery technique to fade out any element on the page. It uses jQuery’s .hide() method to animate the fade-out of the specified element.

The basic technique:

$('.target').hide('slow');

Once this snippet is included on the page, the specified element, .target, will fade out upon page load. Change .target to whichever selector/element you would like to fade out. Here is a similar technique:

$('.container').find('.target').hide('slow');

Here we first target the parent container and then use jQuery’s .find() method to locate the precise .target element, which then is faded out slowly. Note that you can use different values (e.g., fast, 500, et al) for the duration of the fade.

Fade out element on click

Taking the example one step further, we can fade out the specified element on click:

$('.button').click(function() { 		
	$('.container').find('.target').hide('slow');
});

This technique uses jQuery’s .click() method to fade out the specified element when the user clicks the .button element. I use this technique on various projects to fade out elements, and then use jQuery’s .show() to display them again (on click or whatever).