Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the concept of fade effect in jQuery?
The jQuery fade effect combines the ability to display and hide certain items while also including a transition animation. You can observe that the elements gradually fade in and out rather than appearing and disappearing right away. An effect like this could make the website look more spectacular and be more pleasant.
There are different methods used for the creation of fading effects in jQuery like .fadeIn(), .fadeOut() , .fadeToggle() and .fadeTo() . Let’s look into them one by one.
jQuery fadeIn() method
The opacity of the matching items is animated using the .fadeIn() method. It is the same as the .fadeTo() method, with the exception that it does not unhide the element and does not let you choose the maximum opacity level.
Syntax
Following is the syntax for fadeIn() method
.fadeIn( [duration ], [ complete ] )
Example
Following is the example, where we are going to use the fadeIn() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
button {
color: #DE3163;
cursor: pointer;
}
div {
margin: 2px;
width: 90px;
display: none;
height: 50px;
float: left;
}
#tp1 {
background: #BB8FCE;
}
#tp2 {
background: #85C1E9;
}
body {
text-align: center;
background-color: #D5F5E3;
font-family: verdana;
height:100px;
}
</style>
</head>
<body>
<button>Click The Button</button>
<div id="tp1">Welcome To</div>
<div id="tp2">TP</div>
<script>
$(document.body).click(function() {
$("div:hidden").first().fadeIn("fast");
});
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of the click button on the webpage. When the user clicks the button, the event gets triggered and displays a hidden div on the webpage.
jQuery fadeout() method
The .fadeOut() method alters the matched components' opacity in real time. The element no longer affects the page layout once the opacity reaches zero, when the display style property is set to none.
Syntax
Following is the syntax for fadeOut() method
$(selector).fadeOut(speed,easing,callback)
Example
Considering the following example, where we are going to use the fadeOut() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
p {
font-size: 200%;
cursor: pointer;
font-family: verdana;
color: #DE3163;
}
body {
background-color: #D6EAF8;
}
</style>
</head>
<body>
<p>WELCOME , If you click on me I'll get disappear.!</p>
<script>
$("p").click(function() {
$("p").fadeOut("slow");
});
</script>
</body>
</html>
On executing the above script, the output window will pop up, displaying the text on the webpage. When the user tries to click on the text, the event gets triggered and makes the text fade out of the webpage.
jQuery fadeToggle() method
The fadeIn() and fadeOut() methods can be toggle between using the fadeToggle() method. By using the fadeToggle() method, the specific element can be faded in if they are to be faded out. Vice versa for the above, if the elements are faded in, they may also be faded out by utilizing the fadeToggle() method.
Syntax
Following is the syntax for faddeToggle() method
$(selector).fadeToggle(speed,easing,callback)
Example
In the following example, we are going to use the jQuery fadeToggle() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.tp {
display: flex;
align-items: center;
justify-content: center;
background-color: #D5F5E3;
height: 500px;
}
h1 {
color: #DE3163;
display: none;
}
.tutorial {
position: absolute;
top: 520px;
height: 60px;
width: 150px;
background-color: #FCF3CF;
border-radius: 50px;
border: none;
color: #A569BD;
font-size: 19px;
font-weight: bold;
font-family: verdana;
}
</style>
</head>
<body>
<div class="tp">
<button class="tutorial">Click to Toggle</button>
<h1 id="text">WELCOME.!</h1>
</div>
<script>
$(".tutorial").click(function() {
$("#text").fadeToggle('400');
});
</script>
</body>
</html>
When we execute the above code, it will generate an output consisting of the button along with the CSS-applied background displayed on the webpage. When the user clicks the button, the event gets triggered and displays a text; vice versa, when the user again clicks the button, the event gets triggered and the text disappears.
jQuery fadeTo() method
When using the jQuery fadeTo() method, the element won't fade by default; instead, we'll supply the desired opacity value to make the element fade in or out.
Syntax
Following is the syntax for fadeTo() method
$(selector).fadeTo(speed,opacity,easing,callback)
Example
Let’s look at the following example, where we are going to use the fadeTo() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<p>Click on me, to observe decrease in my opacity</p>
<script>
$("p").first().click(function() {
$(this).fadeTo("400", 0.20);
});
</script>
</body>
</html>
On executing the above script, the output window will pop up, displaying the text along with a CSS-applied background displayed on the webpage. When the user tries to click on the text, the event gets triggered and starts fading up to the value we specified.
11 Views
