JQuery fades in and out elements to make it more vivid

For a more dramatic effect, you can fade an element in or out, in either case only changing the transparency of the element over time. JQuery provides three functions related to fading in and 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 removed). Then, the element gradually becomes visible. This function has no effect if the element is already visible on the page. If a speed value is not provided, the element fades in with the "normal" setting (400 milliseconds).

, fadeOut() hides a visual element by making it ghostly out of sight. This function has no effect if the element is already hidden on the page, just like the fadeIn() function. If no speed value is provided, the element fades out at a rate of 400 milliseconds.

, fadeToggle() combines fadein and fadeout effects. If the element is currently hidden, it fades into view. If it is currently visible, the element fades from view. You can use this function to make a prompt appear on or disappear from the page. For example, suppose you have a button that displays the word "instructions." When the interviewer clicks the button, a div with the description fades into view. Clicking the button again will take the description out of sight. To fade in and out every half a second, write the following code:

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

, fadeTo() works slightly differently from the other two effects functions. It reduces the image to a certain degree of transparency. For example, images can be rendered translucent. Unlike other effects, you must provide a speed value. In addition, a value between 0 and 1 is provided to indicate the transparency of the element. For example, to reduce all paragraphs to 75% transparency, write code like this:

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

This function changes the transparency of an element whether it is visible or not. For example, suppose you want to dilute an element currently hidden to 50% transparency. Then, if you use show() or fadeIn() to display the element, it displays with 50% transparency. Again, if you hide a translucent element and then show it, its transparency Settings are restored.