jQuery Basic Tutorial

jQuery Effects

The fadeIn() method gradually changes the opacity of the selected element from hidden to visible.

This method is usually used withfadeOut()methods are used together.

Note:Hidden elements will no longer affect the page layout.

It is similar tofadeTo()The method is similar, but this method does not cancel the hidden element and can specify the final opacity level.

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

Fade in <div> elements:

Example

$("button").click(function(){
　　$("div").fadeIn();
});

Fade in all <p> elements:

Example

$("button").click(function(){
　　$("p").fadeIn();
});

UsedurationParameters:

Example

$("button").click(function(){
　　$("p").fadeIn(1500);
});

UsecallbackParameters:

Example

$("button").click(function(){
　　$("div").fadeIn(600, function(){
$("h3).text("Fade in completed.");
　　});
});

We can implement fade in/fade out effects on any element, for example, simple images:

Example

$("button").click(function(){
　　$("img").fadeIn();
});

Parameter	Description
duration	(Optional) Determines how long the fade effect will last, can be a string or a number. The default value is400 milliseconds Possible values: milliseconds (e.g.,100,500,2(e.g., 1000, 2000, etc.) "fast" "slow"
easing	(Optional) Specify the speed of the element at different points of the animation. The default value is "swing" Possible values: "swing"-At the beginning/Move slower at the end and faster in the middle "linear"-Move at a constant speed
callback	(Optional) The function to be called after the fadeIn() method completes, called once for each selected element