jQuery Fade Effects: fadeIn, fadeOut, and More Explained

Method	Description
fadeIn()	Fades in a hidden element
fadeOut()	Fades out a visible element
fadeToggle()	Fades in/out based on the current visibility
fadeTo()	Fades the element to a specified opacity

jQuery fadeIn() Method

The fadeIn() method is used to gradually make a hidden element visible, with a fading animation effect.

Syntax:

$(selector).fadeIn(speed, callback);

speed (optional): "slow", "fast", or time in milliseconds (e.g., 1000)
callback (optional): A function to run after the fade-in is complete

The following example demonstrates the fadeIn() method with different parameters:

Example

$(document).ready(function() {

$("#fadeBtn").click(function() {

$("#box").fadeIn();

$("#box2").fadeIn("slow");

$("#box3").fadeIn(3000);

});

</script>

Try it yourself

jQuery fadeOut() Method

The fadeOut() method gradually hides a visible element by reducing its opacity to 0, then sets display: none.

Syntax:

$(selector).fadeOut(speed, callback);

speed (optional): "slow", "fast", or milliseconds (e.g., 1000)
callback (optional): Function to run after the fade-out is complete

The following example demonstrates the fadeOut() method with different parameters:

Example

$(document).ready(function() {

$("#fadeBtn").click(function() {

$("#box").fadeOut();

$("#box2").fadeOut("slow");

$("#box3").fadeOut(3000);

});

</script>

Try it yourself

jQuery fadeToggle() Method

The fadeToggle() method allows you to toggle between fadeIn() and fadeOut() — meaning it will:

Fade out the element if it's visible
Fade in the element if it's hidden

All in one method!

Syntax:

$(selector).fadeToggle(speed, easing, callback);

speed (optional) – "slow", "fast", or milliseconds (e.g., 1000)
easing (optional) – Animation easing ("swing" or "linear")
callback (optional) – Function to run after toggle completes

The following example demonstrates the fadeToggle() method with different parameters:

Example

$(document).ready(function() {

$("#fadeBtn").click(function() {

$("#box").fadeToggle();

$("#box2").fadeToggle("slow");

$("#box3").fadeToggle(3000);

});

</script>

Try it yourself

jQuery fadeTo() Method

The fadeTo() method fades an element to a specified opacity (without hiding it completely like fadeOut()).

Syntax:

$(selector).fadeTo(speed, opacity, callback);

speed: "slow", "fast", or a number in milliseconds (e.g., 1000)
opacity: A number between 0.0 (fully transparent) and 1.0 (fully opaque)
callback: Optional function to run after the animation completes

The following example demonstrates the fadeTo() method :

Example

$(document).ready(function(){

$("#fadeToBtn").click(function(){

$("#box").fadeTo(1000, 0.3);

});

</script>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.