jQuery Basic Tutorial

jQuery Effects

The fadeTo() method gradually changes the opacity of the selected element to the specified opacity.

This method is similar tofadeIn()The method is similar, but this method cancels the hiding of the element and always fades in100% opacity.

Note: The fadeTo() method does not change the page layout (the selected element will still occupy the same space as before).

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

Gradually decrease the opacity of the <div> element:

Example

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

Gradually change the opacity of the <div> element:

Example

$("#btn1.click(function(){
　　$("div").fadeTo(1000,　0);
});
$("#btn2.click(function(){
　　$("div").fadeTo(1000,　1);
});

UsingcallbackParameters:

Example

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

Parameter	Description
duration	A string or number specifying how long the fade in effect will last Possible values: milliseconds (for example100,500,2000, etc. "fast" "slow"
opacity	specifies the opacity of the fade in. It must be between 0.00 and1a number between .00
easing	(Optional) A string that specifies the speed of the element at different points in the animation. The default value is "swing" Possible values: "swing"-at the beginning/moves slower at the end and faster in the middle "linear"-moves at a constant speed
callback	(Optional) The fadeTo() method is completed, and the function called