Shulou(Shulou.com)05/31 Report--

This article editor for everyone to introduce in detail "what is the method of jquery fade in", the content is detailed, the steps are clear, the details are handled properly, I hope this article "what is the method of jquery fade in" can help you solve your doubts, following the editor's ideas slowly in depth, let's learn new knowledge together.

There are three ways to fade in: 1, fadeIn (), you can fade in hidden elements, syntax "element object .fadeIn (fade duration)"; 2, fadeTo (), syntax "element object .fadeToggle (duration, 1)"; 3, fadeToggle (), syntax "object .fadeToggle (duration)".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jquery, there are three ways to achieve the fade effect:

FadeIn () method

FadeToggle () method

FadeTo () method

1. FadeIn () method

FadeIn () is used to fade in hidden elements.

Syntax:

$(selector) .fadeIn (speed,callback)

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. .

The optional callback parameter is the name of the function that executes after the fading completes.

Example:

$(document) .ready (function () {$("button") .click (function () {$("# div1") .fadeIn (); $("# div2") .fadeIn ("slow") ("# div3") .fadeIn (3000);});})

The following example demonstrates the effect of fadeIn () using different parameters.

Click to fade in the div element.

2. FadeTo () method

The fadeTo () method allows the gradient to be given opacity (values between 0 and 1).

Syntax:

$(selector) .fadeto (speed,opacity,callback)

The required speed parameters specify the duration 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 argument is the name of the function that executes after the function completes.

You only need to set the value of the opacityc parameter to 1 to achieve the fade effect.

$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeTo ("fast", 1); $("# div2"). FadeTo ("slow", 1); $("# div3"). FadeTo (5000);})

3. FadeToggle () method

The fadeToggle () method can switch between the fadeIn () and fadeOut () methods.

If the element is hidden, fadeToggle () adds a fade effect to the element.

If the element is already displayed, fadeToggle () adds a fade effect to the element.

$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeToggle (); $("# div2"). FadeToggle ("slow"); $("# div3"). FadeToggle (5000);})

After reading this, the article "what is the method of jquery fading in" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.