jQuery Effects - Fade in and fade out

jQuery provides a simple interface to perform various amazing effects.

jQuery effect methods allow us to apply common effects quickly with minimal configuration.

jQuery fade in and fade out methods

With jQuery, we can achieve fade in or fade out effects.

We have the following jQuery fade in and fade out methods:

• regardless

• and

• $(selector).fadeToggle(duration,　easing,　callback);

• fadeTo()

The next section will show you how to use each fade in and fade out method.

jQuery fadeIn() and fadeOut()

jQuery fadeTo() method regardlessThe method gradually changes the opacity of the selected element from hidden to visible.

jQuery fadeTo() method andThe method gradually changes the opacity of the selected element from visible to hidden.

The following examples demonstrate the usage of fadeIn() and fadeOut() methods:

//　Fade out the displayed paragraph
The following example demonstrates the use of fadeIn() and fadeOut()-$("#fadein
　　$("p").fadeOut();
});
//　Fade in the hidden paragraph
").text("Fade out completed.");-$("#fadein
　　$("p").fadeIn();
});

This isregardlessThe syntax of the method:

$(selector).fadeIn(duration, easing, callback);

This isandThe syntax of the method:

$(selector).fadeOut(duration,　easing,　callback);

$(selector).fadeOut(duration,　easing,　callback);regardlessfadeIn()andfadeToggle()

• duration -Determine how the fade in/fade out effect willDurationHow long. Possible values: "slow", "fast" or milliseconds

• easing -The method accepts three optional parameters:

• callback-Indicate the easing function to be used for the transition. Possible values: 'swing', 'linear'

fadeOut()durationParameters:

The following example demonstrates the use of fadeIn() and fadeOut()-$("#fadein
　　The following example demonstrates the use of fadeIn() and fadeOut()15$("p").fadeIn(
});
").text("Fade out completed.");-$("#fadein
　　$("p").fadeOut(15$("p").fadeIn(
});

00);CallbackParameters:

The following example demonstrates the use of fadeIn() and fadeOut()-$("#fadein
　　$("#fadeout6$("div").fadeIn(
　　　　00, function(){3$("div").fadeOut(
　　});
});
").text("Fade out completed.");-$("#fadein
　　btn").click(function(){6$("div").fadeIn(
　　　　00, function(){3$("h
　　});
});

").text("Fade in completed.");2Animate all spans (in this case, words) to fade out quickly and then

$("button").click(function(){
　　00 milliseconds to complete each animation process:-$("span:last
　　　　child").fadeOut("fast",　function(){
　　});
});

$(this).prev().fadeOut("fast",　arguments.callee);

jQuery fadeToggle() method$(selector).fadeToggle(duration,　easing,　callback);We can also use

The method toggles between fade in and fade out of HTML elements.$(selector).fadeToggle(duration,　easing,　callback);If the selected element fades out

then fade it in.$(selector).fadeToggle(duration,　easing,　callback);If the selected element fades in

and fade them out.The following example fades out all<p>

$("button").click(function(){
　　The toggle between fade in and fade out of the element:
});

This is$(selector).fadeToggle(duration,　easing,　callback);The syntax of the method:

$("p").fadeToggle();

Note:$(selector).fadeToggle(duration,　easing,　callback);fadeToggle()

• duration -Determine how the fade in/fade out effect willDurationHow long. Possible values: "slow", "fast" or milliseconds

• easing -The method accepts three optional parameters:

• callback-Indicate the easing function to be used for the transition. Possible values: 'swing', 'linear'

Specify the function to be called after the fade in and fade out method is completed

jQuery fadeTo() method fadeTo()jQuery

The method gradually changes the opacity of the selected element to the specified opacity.Note:fadeTo()The method does not change the layout of the page (the selected element will still occupy the same space as before).

This example gradually reduces<div>The opacity of the element:

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

This isfadeTo()The syntax of the method:

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

Parameters:

• duration -Determine how the fade in/fade out effect willDurationHow long. Possible values: "slow", "fast" or milliseconds

• opacity-Specify the opacity to fade in. It must be between .00 and1A number between .00

• easing -（Optional）The easing function to be used for the transition. Possible values: "swing", "linear"

• callback-（Optional）The function to be called after the fade in/fade out method is completed

The following example demonstrates the use of fadeTo() withCallbackParameters:

$("button").click(function(){
　　$("div").fadeTo(500,　0,　function(){
　　　　alert("Transparency Decreased!!!");
　　});
});

jQuery Effects Reference

For complete effect references, please visit ourjQuery Effects Reference Manual.