JQuery fade-in and fade-out elements make their effects more vivid.

JQuery fade-in and fade-out elements make their effects more vivid.

To achieve a more vivid effect, you can fade out or fade in an element. In any case, the transparency of the element only changes over time. JQuery provides three functions related to fade-in and fade-out:

· FadeIn () fades a hidden element into the field of view. First, the space occupied by the elements appears on the page (which may mean that other elements on the page will be removed). Then, the elements gradually become visible. If the element is visible on the page, this function has no effect. If no speed value is provided, the element uses the "regular" setting to fade in (400 ms ).

· FadeOut () hides a visible element from sight as a ghost. If the element has been hidden on the page, this function has no effect, which is the same as the fadeIn () function. If no speed value is provided, the elements fade out at a speed of 400 milliseconds.

· FadeToggle () combines fade-in and fade-out effects. If the element is hidden, it fades out of sight. If the element is visible, it fades out of sight. You can use this function to make a prompt box appear on or disappear from the page. For example, suppose there is a button on which the word "instructions" is displayed ". When the interviewer clicks this button, a div with a description fades out of sight. Clicking this button again will make the description fade out of sight. To make the prompt box fade in or out every half a second, you can write the code as follows:

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

· The working method of fadeTo () is slightly different from that of the other two effect functions. It fades the image to a certain degree of transparency. For example, the image can fade to translucent. Different from other effects, a speed value must be provided. In addition, 0 ~ A value between 1 to indicate the transparency of the element. For example, to reduce the transparency of all paragraphs to 75%, you can write the code as follows:

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

This function changes the transparency of an element, whether it is visible or invisible. For example, we assume that we need to reduce the transparency of an element currently hidden to 50%. Then, if show () or fadeIn () is used to display the element, it is displayed with a 50% transparency. Similarly, if a translucent element is hidden and then displayed, its transparency settings will be restored.

Jquery image fade-in and fade-out effect

Jquery.malsup.com/cycle/
To see the results of this website, you only need to use a cycle plug-in to get everything done.

The effect you need should be the most basic. This address is jquery.malsup.com/cycle/basic.html.
Right-click the source file to view all the code. Just replace your code.

Plug-in: jquery.malsup.com/cycle/download.html
Reference: jquery.malsup.com/cycle/

How does jquery addClass control the speed of style fade in and out ??

. FadeIn ("xxx ")
Xxx can be replaced with slow and normal fast
Or customize the time.
. FadeIn (1000)
1000 equals 1 second.

No. addClass
Direct. fadeIn Fade in. fadeOut fade out
. FadeTo (time, "Transparency ")
It means fade out or fade in to xx Program
Time is 1000 equals 1 second
Transparency 0 is full transparency 1 is not transparent.
You can set it to 0.1 0.2 0.3 0.4 0.5 and so on. Depends on your needs.