Ways to fade elements in jquery

To achieve a more vivid effect, you can fade or fade an element, in either case, just change the transparency of the element over time. jquery provides 3 functions that are related to fading and fading:

Fadein () causes a hidden element to fade into the field of view . First, the space occupied by the element appears on the page (which may mean that other elements on the page are moved), and then the element becomes visible gradually. If the element is already visible on the page, the function has no effect. If a speed value is not provided, the element uses the "general" setting to fade in (400 milliseconds).

· FadeOut () hides it by making a visual element fade out of sight like a ghost . If the element is already hidden on the page, this function has no effect, as is the Fadein () function. If a speed value is not provided, the element fades out at a speed of 400 milliseconds.

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

1. $ (' #button '). Click (function () {
2. $ (' #instructions '). Fadetoggle (500);
3. });//end click

the way Fadeto () works is slightly different from the other two effect functions. It fades the image to a certain degree of transparency. For example, you can make the image fade to translucent. Unlike other effects, you must provide a speed value. In addition, a value between 0~1 is provided to represent the transparency of the element. For example, to fade all paragraphs to 75% transparency, you can write code like this:

1. $ (' 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 you use Show () or Fadein () to display the element, it is displayed with 50% transparency. Similarly, if you hide a translucent element and then display it, its transparency setting is restored.

Article source page programming, reprint please specify Source: http://uphtm.com/js/147.html

Ways to fade elements in jquery