Examples
jQuery fadeIn()
Demonstrates how to use the fadeIn() method to gradually make an element
visible.
jQuery fadeOut()
Shows how to use the fadeOut() method to gradually hide an element.
jQuery fadeToggle()
Illustrates how to toggle the visibility of an element using a fading
effect.
jQuery fadeTo()
Demonstrates how to fade an element to a specific opacity level.
jQuery Fading Methods
jQuery provides several methods to create fading effects, allowing you to
smoothly show or hide elements by adjusting their opacity.
Available fade methods include:
- fadeIn() – Fades in a hidden element.
- fadeOut() – Fades out a visible element.
- fadeToggle() – Toggles between fading in and fading out.
- fadeTo() – Fades the element to a given opacity.
These methods are useful for adding smooth visual transitions to your web
pages.
jQuery fadeIn() Method
The fadeIn() method in jQuery is used to make hidden elements appear
gradually with a fading effect.
Syntax:
$(selector).fadeIn(speed, callback);
- speed (optional): Sets how fast the element fades in. Accepts "slow", "fast", or time in milliseconds (e.g., 1000).
- callback (optional): A function that runs after the fade-in effect finishes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeIn Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn(); // default speed
$("#div2").fadeIn("slow"); // slow speed
$("#div3").fadeIn(3000); // 3 seconds
});
});
</script>
<style>
#div1, #div2, #div3 {
width: 200px;
height: 100px;
display: none; /* hidden initially */
margin: 10px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
}
#div1 { background-color: red; }
#div2 { background-color: green; }
#div3 { background-color: blue; }
</style>
</head>
<body>
<h2>jQuery fadeIn() Example</h2>
<button>Click to Fade In</button>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</body>
</html>
This code will fade in three different <div> elements at different
speeds when the button is clicked.
jQuery fadeOut() Method
The fadeOut() method in jQuery is used to gradually hide visible elements
using a fading effect.
Syntax:
$(selector).fadeOut(speed, callback);
- speed (optional): Defines how fast the fade out happens. Values can be "slow", "fast", or a duration in milliseconds (e.g., 2000).
- callback (optional): A function that runs after the fade-out is complete.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeOut Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut(); // default speed
$("#div2").fadeOut("slow"); // slow speed
$("#div3").fadeOut(3000); // 3 seconds
});
});
</script>
<style>
#div1, #div2, #div3 {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
}
#div1 { background-color: red; }
#div2 { background-color: green; }
#div3 { background-color: blue; }
</style>
</head>
<body>
<h2>jQuery fadeOut() Example</h2>
<button>Click to Fade Out</button>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</body>
</html>
This code fades out three different <div> elements at different
speeds when the button is clicked.
jQuery fadeToggle() Method
The fadeToggle() method in jQuery switches between fadeIn() and
fadeOut().
If the element is hidden, it fades in.
If the element is visible, it fades out.
Syntax:
$(selector).fadeToggle(speed, callback);
speed (optional): Sets the speed of the effect. You can use "slow",
"fast", or specify time in milliseconds (e.g., 1500).
callback (optional): A function to run after the toggle effect
completes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeToggle Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle(); // default speed
$("#div2").fadeToggle("slow"); // slow toggle
$("#div3").fadeToggle(3000); // 3 seconds
});
});
</script>
<style>
#div1, #div2, #div3 {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
}
#div1 { background-color: red; }
#div2 { background-color: green; }
#div3 { background-color: blue; }
</style>
</head>
<body>
<h2>jQuery fadeToggle() Example</h2>
<button>Click to Fade Toggle</button>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</body>
</html>
This code toggles the visibility of three <div> elements with
different speeds when the button is clicked.
jQuery fadeTo() Method
The fadeTo() method in jQuery is used to fade an element to a specific
opacity level (between 0 and 1).
Syntax:
$(selector).fadeTo(speed, opacity, callback);
- speed (required): How fast the fade happens. Use "slow", "fast", or a time in milliseconds (e.g., 2000).
- opacity (required): The target opacity (a value from 0 to 1).
- callback (optional): A function to run after the fade effect is complete.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeTo Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15); // fade to 15% opacity
$("#div2").fadeTo("slow", 0.4); // fade to 40% opacity
$("#div3").fadeTo("slow", 0.7); // fade to 70% opacity
});
});
</script>
<style>
#div1, #div2, #div3 {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
}
#div1 { background-color: red; }
#div2 { background-color: green; }
#div3 { background-color: blue; }
</style>
</head>
<body>
<h2>jQuery fadeTo() Example</h2>
<button>Click to FadeTo Different Opacity</button>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</body>
</html>
This code fades each <div> element to a different level of
transparency when the button is clicked.
More topic in jQuery
