jQuery fadeOut()
jQuery Tutorial » jQuery fadeOut()
What is fadeOut jQuery?
fadeOut( ) Method in jQuery is used to change the level of opacity for selected item from visible one to the hidden.
Using this method, the fadded item will not occupy any space.
Syntax:
$(selector).fadeOut(speed,callback);
$(selector).fadeOut();
The optional speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.
Easing parameter is an optional used to specify the speed of item to different points of animation.
The next callback parameter which can also be optional and is a function that is executed after the fadeOut() is completed.
jQuery display fadeIn and fadeOut effect.
Let's have an example to demonstrate how is working jQuery fadeOut() effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery | fadeOut() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style = "text-align:center;">
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").fadeOut()
});
$(".btn2").click(function(){
$("h2").fadeIn();
});
});
</script>
<h1 style = "color:green;" >Agernic.com jQuery tutorial</h1>
<h2>jQuery | fadeOut() Method</h2>
<button class="btn1" style="padding:10px 20px; color:#EAEAEA; background:#039">Fade out</button>
<button class="btn2" style="padding:10px 20px; color:#EAEAEA; background: #09C">Fade in</button>
</body>
</html>
Related subjects:
jQuery FadeIn()
jQuery Attributes
Effects hide / show
jQuery selectors
Tags: jQuery fadeOUT(): not working, delay, callback, then remove, slow, is not a function, example, then, opacity, after 5 deconds, and remove, without display none
What is fadeOut jQuery?
How does jQuery fadeOut work?
How do you make something fadeIn jQuery?
What is fadeOut in CSS?
fadeOut() With Duration Parameter - Example
fadeOut() method can accepts the first input argument like duration parameter value meaning: for how long the effect would run.
duration any number can be given or just a keyword as: “slow” or “fast” can be used which is for 200 milliseconds and 600 milliseconds respectively. For example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery | fadeOut() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style = "text-align:center;">
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h2").fadeOut();
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$(".btn2").click(function(){
$("h2").fadeIn();
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<h1 style = "color:green;" >Agernic.com jQuery tutorial</h1>
<h2>jQuery | fadeOut() Method</h2>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<button class="btn1" style="padding:10px 20px; color:#EAEAEA; background:#039">Fade out</button>
<button class="btn2" style="padding:10px 20px; color:#EAEAEA; background: #09C">Fade in</button>
</body>
</html>
Various ways with duration parameter for using fadeOut() are discussed in the above example.
fadeOut() effect with alert message
fadeOut() and fadeIn() effect with alert message - Example:
<html>
<head>
<title> jQuery | fadeOut() Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style = "text-align:center;">
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("h2").fadeOut(2000, function() {
alert("fadeOut() method is finished!");
});
});
$(".btn2").click(function() {
$("h2").fadeIn(2000, function(){
alert("fadeIn() method is finished!");
});
});
});
</script>
<h1 style = "color:green;" > Agernic.com Tutorial jQuery </h1>
<h2>jQuery | fadeOut() Method</h2>
<button class="btn1" style="padding:10px 20px; color:#EAEAEA; background:#039">Fade out</button>
<button class="btn2" style="padding:10px 20px; color:#EAEAEA; background: #09C">Fade in</button>
</body>
</html>
jQuery fadeOUT(): not working, delay, callback, then remove, slow, is not a function, example, then, opacity, after 5 deconds, and remove, without display none
What is fadeOut jQuery?
How does jQuery fadeOut work?
How do you make something fadeIn jQuery?
What is fadeOut in CSS?
JQuery fadeOut() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.