The jQuery fadeOut() method is used to fade out a visible element.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Syntax
$(selector).fadeOut(speed,callback);
- The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
- The optional callback parameter is a function to be executed after the fading completes.
Example 1
The following example demonstrates the fadeOut() method with different parameters:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div4").fadeOut(100);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:180px;height:100px;background-color:red;"></div><br>
<div id="div2" style="width:180px;height:100px;background-color:green;"></div><br>
<div id="div3" style="width:180px;height:100px;background-color:blue;"></div>
<div id="div4" style="width:180px;height:100px;background-color:black;"></div>
</body>
</html>
Example 2
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
p {
font-size: 150%;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
<script>
$("p").click(function() {
$("p").fadeOut("slow");
});
</script>
</body>
</html>
Comments
Post a Comment