AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery fadeOut()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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, easing, callback );
$(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:

<!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(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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.