Introduction
Today you will learn about the fade methods in jQuery.
jQuery has the following fade methods:
fadeIn()
adeOut()
fadeToggle()
fadeTo()
Browser Support
![images.jpg]()
Now we will discuss the fadeIn method and fadeOut method.
The "fadeIn()" method animates by slowly increasing the opacity of relevant elements. If you specify a higher value like "$ ("#id"). fadeIn(3000);" then the durations are given in milliseconds; higher values indicate slower animations, not faster ones.
The "fadeOut()"method is just the opposite of "fadeIn()"only for opacity. If you specify a higher value then the opacity slowly decreases.
Basic Example:
<!doctype html>
<html>
<head>
<title>FadeIn</title>
<script src="Jquary.js"></script>
<script>
$(document).ready(function () {
$("#but").click(function () {
$("#red1").fadeIn("slow");
$("#blue1").fadeIn(4000);
});
$("#but2").click(function () {
$("#red1").fadeOut(4000);
$("#blue1").fadeOut(3500);
});
});
</script>
<style>
#red1 {
height: 300px;
width: 300px;
background: red;
}
#blue1 {
height: 300px;
width: 300px;
background: blue;
}
.button {
}
</style>
</head>
<body style="background: green;">
<div style="width: 320px; float: left;">
<div style="width: 300px; height: 300px; float: left;">
<div id="red1">
</div>
</div>
<input type="button" id="but" value="fadein" />
</div>
<div style="width: 320px; float: left;">
<div style="width: 300px; height: 300px; float: left;">
<div id="blue1"></div>
</div>
<input type="button" id="but2" value="fadeout" />
</div>
</body>
</html>
First click the "fadeout" button then the "fadeout" button.
![]()
![]()
![Clipb.jpg]()
It does the fadeOut.
![FAD.jpg]()
Then it does the fadeIn.
Toggle Method
The "fadeToggle()" method does the same. If however you use toggle then you will write less code and you can do fadein and fadeout by one button. This method is almost used in design.
Basic Example:
<script src="Jquary.js"></script>
<script>
$(document).ready(function () {
$("#but").click(function () {
$("#red1").fadeToggle(4000);
$("#blue1").fadeToggle(3500);
});
});
</script>
![toggle.jpg]()
I hope you can solve problems from this code.