jQuery fade elements to make their effects more vivid_jquery

To achieve a more vivid effect, you can fade an element out or in, in either case simply changing the element's transparency over time. jQuery provides 3 functions related to fade in and fade out:

·fadeIn() makes a hidden element fade into view. First, the space occupied by the element appears on the page (which may mean that other elements on the page are moved away); then, the element gradually becomes visible. If the element is already visible on the page, this function has no effect. If a speed value is not provided, the element fades in using the "normal" setting (400 milliseconds).

·fadeOut() hides a visible element by causing it to ghostly fade out of sight. If the element is already hidden on the page, this function has no effect, just like the fadeIn() function. If a speed value is not provided, the element fades out at 400 milliseconds.

·fadeToggle() combines the fade-in and fade-out effects. If the element is currently hidden, it fades into view; if it is currently visible, the element fades out of view. You can use this function to make a tooltip appear on the page or disappear from the page. For example, suppose you have a button that displays the word "instructions." When a visitor clicks the button, a div with the description will fade into view; clicking the button again will cause the description to fade out of view. To make the prompt box fade in or out every half second, you can write the code like this:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·The way fadeTo() works is slightly different from the other two effect functions. It fades the image to a certain transparency. For example, you can make an image fade to semi-transparent. Unlike other effects, a speed value must be provided. In addition, a value between 0 and 1 is provided to represent the transparency of the element. For example, to fade all paragraphs to 75% transparency, you can write the code like this:

$('p').fadeTo('normal'，.75);

This function changes the transparency of an element, regardless of whether the element is visible or invisible. For example, suppose you want to fade an element that is currently hidden to 50% transparency. Then, if the element is displayed using show() or fadeIn(), it will be displayed with 50% transparency. Likewise, if you hide a translucent element and then show it, its transparency setting is restored.