jQuery-4. Animated article---fade effect

Fade animation fadeout in jquery

The usual way to make an element invisible on the page is by setting the display:none of the style. In addition, some similar approaches can be used to achieve this goal. Here is a method of transparency, set the element transparency to 0, can make the element invisible, the transparency parameter is the value between 0~1, by changing this value can let the element have a transparency effect. This is how common fade animations are.

The FadeOut () function is used to hide all matching elements with a fade-out transition animation effect

The so-called "fade Out" hidden, the element is hidden state is not made any change, the element is visible, then it is hidden.

. FadeOut ([duration], [complete])

The fade-out effect of all matching elements is achieved by changing the opacity, and optionally triggering 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.

The string ' fast ' and ' slow ' represent a delay of 200 and 600 milliseconds, respectively. If any other string is provided, or if the duration parameter is omitted, then the default is 400 milliseconds delay

<p> Test text fade-in effects </p>
<p> Focus on sharing </p>
Fade-out hidden effects:
<select id= "Animation" >
<option value= "1" >fadeout () </option>
<option value= "2" >fadeout ("slow") </option>
<option value= "3" >fadeout (</option>)
<option value= "4" >fadeout (complete) </option>
<option value= "5" >fadeout ("linear") </option>
<option value= "6" >fadeout (options) </option>
</select>

</br></br>

<input id= "btnfadeout" type= "button" value= "Click Fade Out Hidden"/>
<input id= "btnshow" type= "button" value= "Display"/>

<script type= "Text/javascript" >
The display button
$ ("#btnShow"). Click (function () {
$ ("P"). Show ();
});

"Hide" button
$ ("#btnFadeOut"). Click (function () {
var v = $ ("#animation"). Val ();
if (v = = "1") {
$ ("P"). FadeOut ();
} else if (v = = "2") {
$ ("P"). FadeOut ("slow");
} else if (v = = "3") {
$ ("P"). FadeOut (3000);
} else if (v = = "4") {
$ ("P"). FadeOut ((), function () {
Alert ("Hidden!");
});
} else if (v = = "5") {
$ ("P"). FadeOut ("linear");
} else if (v = = "6") {
$ ("P"). FadeOut ({
duration:1000
});
}
});
</script>

Fade animation Fadein in jquery

Fadeout is the fade effect, on the contrary, there is a fade effect Fadein, the method uses both are consistent, but the result is the opposite

. fadeIn ([duration], [complete])

• Duration: Specifies how long the transition animation runs (in milliseconds) and the default value is 400. This parameter can also be a string "fast" (=200) or "slow" (=600).
• The function to execute after the element is displayed. This point within the function points to the current DOM element.

The FadeIn () function is used to display all matching elements with a fade-in animation effect.

Attention:

• Fade in animation principle: the opacity of the manipulation element is gradually increased from 0% to 100%
• If the element itself is visible, no change is made to it. If the element is hidden, make it visible

<p> Test text fade-out effects </p>
<p> Focus on sharing </p>
Selection: Fade out of hidden effects
</br>
</br>
<select id= "Animation" >
<option value= "1" >fadein () </option>
<option value= "2" >fadein ("slow") </option>
<option value= "3" >fadein (</option>)
<option value= "4" >fadein (A, complete) </option>
<option value= "5" >fadein ("linear") </option>
<option value= "6" >fadein (options) </option>
</select>
</br></br>
<input id= "Btnfadein" type= "button" value= "Perform fade out Effect"/>
<input id= "btnhide" type= "button" value= "Click to hide"/>
<script type= "Text/javascript" >
The display 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 (3000);
} else if (v = = "4") {
$ ("P"). FadeIn ((), function () {
Alert ("Show finished!");
});
} else if (v = = "5") {
$ ("P"). FadeIn ("linear");
} else if (v = = "6") {
$ ("P"). FadeIn ({
duration:1000
});
}
});

"Hide" button
$ ("#btnHide"). Click (function () {
$ ("P"). Hide ();
});
</script>

jquery fade in and out toggle Fadetoggle

The Fadetoggle () function toggles all matching elements, with a fade-in/fade-out animation effect. I've also learned that toggle and Slidetoggle are a similar approach.

Fadetoggle toggles the fadeout and Fadein effects, so-called "toggle", that is, if the element is currently visible, hide it (fade out), or display it (fade in) if the element is currently hidden.

Common syntax:. Fadetoggle ([duration], [complete])

The optional Duration parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The optional callback parameter is the name of the function that is executed after Fadetoggle completes.

The Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method. If the element has faded out, fadetoggle () adds a fade effect to the element. If the element has been faded in, fadetoggle () adds a fade effect to the element.

<p> Test text fade Toggle Effects </p>
<p> Focus on sharing </p>
Fade-in Hidden effects:
<select id= "Animation" >
<option value= "1" >fadetoggle () </option>
<option value= "2" >fadetoggle ("slow") </option>
<option value= "3" >fadetoggle (</option>)
<option value= "4" >fadetoggle (complete) </option>
<option value= "5" >fadetoggle ("linear") </option>
<option value= "6" >fadetoggle (options) </option>
</select>
<input id= "Btnfadeswitch" type= "button" value= "click Toggle Show/Hide" >
<script type= "Text/javascript" >
Toggle Show/Hide button
$ ("#btnFadeSwitch"). Click (function () {
var v = $ ("#animation"). Val ();
if (v = = "1") {
$ ("P"). Fadetoggle ();
} else if (v = = "2") {
$ ("P"). Fadetoggle ("slow");
} else if (v = = "3") {
$ ("P"). Fadetoggle (3000);
} else if (v = = "4") {
$ ("P"). Fadetoggle (+, function () {
Alert ("Switch complete!");
});
} else if (v = = "5") {
$ ("P"). Fadetoggle ("linear");
} else if (v = = "6") {
$ ("P"). Fadetoggle ({
duration:1000
});
}
});
</script>

jquery Fade in effect Fadeto

Fade Fadein and fadeout are opacity properties that modify element styles, but they all share a common feature, with varying intervals of 0 or 1

FadeIn: Fade in effect, content display, opacity is 0 to 1fadeOut: Fade out effect, content hidden, opacity is 1 to 0

What do I do if I want to animate an element and perform the Opacity = 0.5 effect?

If we do not consider CSS3, we use JS implementation, the basic is through the timer, in the set time within a little bit of modification opacity value, The ultimate is 0.5, although the principle is simple, but it is not as comfortable as a key setting, jquery provides a Fadeto method that allows for a change in transparency one step

Grammar

. FadeTo (Duration, opacity, callback)

The required duration parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The required opacity parameter in the FadeTo () method sets the fade effect to the given opacity (values between 0 and 1). The optional callback parameter is the function name that is executed after the function completes.

<p> Test text transparency effects </p>
<p> Focus on sharing </p>
Setting effect of transparency:
<select id= "Animation" >
<option value= "1" >fadeto ("slow", 0.5) </option>
<option value= "2" >fadeto (0.2) </option>
<option value= "3" >fadeto (0.9, complete) </option>
</select>
<input id= "Btnfadeswitch" type= "button" value= "click Toggle Show/Hide" >
<script type= "Text/javascript" >
Toggle Show/Hide button
$ ("#btnFadeSwitch"). Click (function () {
var v = $ ("#animation"). Val ();
if (v = = "1") {
$ ("P"). FadeTo ("slow", 0.5);
} else if (v = = "2") {
$ ("P"). FadeTo (1000, 0.2);
} else if (v = = "3") {
$ ("P"). FadeTo (0.9, function () {
Alert (' Done ')
});
}
});
</script>

jQuery-4. Animated article---fade effect