jQuery Fade
Using jQuery, you can fade elemnts in and out of visibility. You can change the opacity level of elements from invisible state to visible state or visible state to invisible state.
Here are some fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() Method
Using the jQuery fadeIn() method, you can change the opacity level from invisible state to visible state of a selected HTML element.
Syntax:
$(selector).fadeIn(speed,callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.
callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeIn() method.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<h2> fadeIn() method effect </h2>
<button>Click here to see fading effect</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:purple;"></div>
</body>
</html>
Try Now
jQuery fadeOut() Method
Using the jQuery fadeOut() method, we can change the item’s visibility. It sets the selected item in the invisible state. So the visibility of the selected element will be in transparent mode.
Syntax:
$(selector).fadeOut(speed,callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.
callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeOut() method.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<h2> fadeOut() method effect </h2>
<button> Click here to see fadeOut boxes </button><br><br>
<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>
</body>
</html>
Try Now
jQuery fadeToggle()
The jQuery fadeToggle() method is used to make toggle between the fadeIn() and fadeOut() method. If the elements are faded in, the fadeToggle() method make them faded out and if they are faded out then the fadeToggle() method make them faded in.
Syntax:
$(selector).fadeToggle(speed,callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.
callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeToggle() method.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<h2>fadeToggle() method effect </h2>
<button>Click here to see fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:purple;"></div>
</body>
</html>
Try Now
jQuery fadeTo () Method
jQuery fadeTo() method is used to fading to a given opacity . Opacity value starts from 0 to 1.
Syntax:
$(selector).fadeTo(speed, opacity, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.
callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeTo() method.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<h2>fadeToggle() method effect </h2>
<button>Click here to see fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:purple;"></div>
</body>
</html>
Try Now |