JQuery effect-fade in/out

Fade Effect Method List

Method	Description
FadeIn ()	Used to display all matching elements with a fade-in animation effect.
FadeOut ()	Used to hide all matching elements with a fade-out transition animation effect.
Fadetoggle ()	Used to toggle all matching elements with a fade-in/fade-out animation effect.
FadeTo ()	Incrementally adjusts the opacity of all matching elements to the specified opacity, and optionally triggers a callback function after the animation is complete.

Method Description

fadeIn ()
Used to display all matching elements with a fade-in animation effect.

The fade-in animation effect, that is, the proportion of the element's opacity increases gradually from 0% to 100%.

If the element itself is visible, no change is made to it. If the element is hidden, make it visible.

In contrast to this function is the fadeout () function, which hides all matching elements with a fade-out transition animation effect.

syntax: . FadeIn ([duration] [, easing] [, complete]). FadeIn (options)

parameter Description:

Parameters	Description
Duration	The optional/string/number type Specifies how long the transition animation will run (in milliseconds), and the default value is 400. This parameter can also be a string "fast" (=200) or "slow" (=600).
Easing	The optional/string type specifies which animation effect to use, the default is "Swing", and the function name can be set to "linear" or another custom animation style.
Complete	Optional/function The function that needs to be performed after the type element is displayed. This point within the function points to the current DOM element.
Options	An object type that specifies the option parameter of the objects.

The parameters options object can recognize the following attributes (the following properties are optional):

Properties	Property Description
Duration	See Parameter duration.
Easing	See parameter easing.
Complete	See parameter complete.
Queue	The Boolean type indicates whether the animation is placed in the effect queue and is true by default. Starting with version 1.7, this parameter can be a string that is used to put the effect queue for the specified name. If the queue you specify does not start automatically, you need to manually call Dequeue ("QueueName") to start the queue.

In addition, JQuery 1.4 and 1.8 also add many new option support for parameter options, but these parameters are not commonly used

Html:

Fade-in Display effect:
<select id= "animation" >
    <option value= "1" >fadein () </option>
    <option Value= "2" >fadein ("slow") </option>
    <option value= "3" >fadein (+) </option>
    < Option value= "4" >fadein (+, complete) </option>
    <option value= "5" >fadein (+, "linear") </ option>
    <option value= "6" >fadein (options) </option>
</select>
<input id= " Btnfadein "type=" button "value=" display "> <input id=" btnhide "type=" button "value=" hidden ">

JavaScript code:

The show button
$ ("#btnFadeIn"). Click (function () {
    var v = $ ("#animation"). Val ();
    if (v = = "1") {
        $ ("P"). FadeIn ();       
    } else if (v = = "2") {
        $ ("P"). FadeIn ("slow");    
    } else if (v = = "3") {
        $ ("P"). FadeIn (+);  
    } else if (v = = "4") {
        $ ("P"). FadeIn (The function () {
            alert ("Displayed!");
        });    
    } else if (v = = "5") {
        $ ("P"). FadeIn ("linear");    
    } else if (v = = "6") {
        $ ("P"). FadeIn ({duration:1000});}
);

"Hide" button
$ ("#btnHide"). Click (function () {
    $ ("P"). Hide ();
});

FadeOut ()
Used to hide all matching elements with a fade-out transition animation effect.

The so-called "fade-out" animation effect, that is, the proportion of the element's opacity gradually decreases from 100% to 0%.

If the element itself is hidden, no change is made to it. If the element is visible, it is hidden.

Relative to the function is the Fadein () function, which displays all matching elements with a fade-in animation effect.

syntax: . FadeOut ([duration] [, easing] [, complete]). FadeOut (options)

parameter Description:
fadeOut parameter description with fadeIn;

Fadetoggle ()
Used to toggle all matching elements with a fade-in/fade-out animation effect.

The so-called "toggle", that is, if the element is currently visible, it is hidden (fading out), or if the element is currently hidden, make it appear (fade in).

syntax: . Fadetoggle ([duration] [, easing] [, complete]). Fadetoggle (options)

parameter Description:
fadetoggle parameter description with fadeIn;

FadeTo ()
adjusts the opacity of all matching elements incrementally to the specified opacity, and optionally triggers a callback function after the animation is complete.

This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.

syntax: . FadeTo ([Duration,] opacity[, easing] [, complete])

parameter Description:

Parameters	Description
Duration	Optional/string/number type A string of three predetermined speeds ("slow" = "600ms", "normal" = "400ms", or "fast" = "200ms") or a millisecond value representing the duration of the animation.
Opacity	The number type Specifies an amount that represents transparency between 0 and 1.
Easing	The optional/string type specifies which animation effect to use, the default is "Swing", and the function name can be set to "linear" or another custom animation style.
Complete	Optional/function The function that needs to be performed after the type element is displayed. This point within the function points to the current DOM element.

Code:

Use 200 milliseconds to quickly adjust the transparency of the paragraph to 0.25, about 1/4 of the visibility, and then pop up a dialog box
$ ("P"). FadeTo ("Fast", 0.25, function () {
   alert ("Animation Done. ");
 });