jQuery Fading Effects
jQuery has several methods that can be used to adjust the opacity of elements .jQuery has the following fade methods:
- fadeIn() - Display the matched elements with fade in effect.
- fadeOut() - Hide the matched elements with fade out / transparent effect.
- fadeToggle() - Toggles between the fadeIn() and fadeOut() methods.
- fadeTo() - Fading the matched elements to certain opacity.
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).fadeToggle(speed,easing,callback)
Parameters - speed - Optional values in milliseconds, "slow", "normal", and "fast".
- opacity - Required attribute that specifies the opacity to fade to, between 0.00 and 1.00
- easing - Indicates which easing function (swing/linear) to use for the transition
- callback - An optional function to run after the method is completed
jQuery fadeIn()/fadeOut() methods
You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.
$("#btnFOut").click(function(){
$("div").fadeOut();
});
$("#btnFIn").click(function(){
$("div").fadeIn();
});
<button id="btnFOut">Fade Out Div</button>
<button id="btnFIn">Fade In Div</button>
<div>FadeIn/FadeOut</div>
Browser ViewFadeIn/FadeOut
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:10%;
}
</style>
<script>
$(document).ready(function(){
$("#btnFOut").click(function(){
$("div").fadeOut();
});
$("#btnFIn").click(function(){
$("div").fadeIn();
});
});
</script>
</head>
<body>
<button id="btnFOut">Fade Out Div</button>
<button id="btnFIn">Fade In Div</button>
<div>FadeIn/FadeOut</div>
</body>
</html>
Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how long the fading animation will run. If you want to specify the speed, you can simply pass in a string of either 'slow', 'normal', or 'fast' . If you'd rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds.
$("#btnFOut").click(function(){
$("div").fadeOut(2000);
});
$("#btnFIn").click(function(){
$("div").fadeIn(2000);
});
jQuery fadeTo() Method
jQuery fadeTo() method is used to fading the matched elements to certain opacity. Syntax
$(selector).fadeTo(speed, opacity, callback);
The required opacity parameter specifies the final opacity of the target elements that can be a number between 0 and 1 . The duration or speed parameter is also required for this method that specifies the duration of the fade to animation.
$("#1").fadeTo("slow", 0.1);
<div id="1" ></div>
Browser View
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:10%;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#1").fadeTo("slow", 0.1);
$("#2").fadeTo("slow", 0.5);
$("#3").fadeTo("slow", 1);
});
});
</script>
</head>
<body>
<div id="1" ></div><br>
<div id="2" ></div><br>
<div id="3" ></div><br>
<button>Fade To</button>
</body>
</html>
jQuery fadeToggle() Method
The jQuery fadeToggle() method perform both the operation fade in and fade out by increasing or decreasing the opacity. Syntax
$(selector).fadeToggle(speed,easing,callback)
When triggered on an element, the element's display style property is set to none once the opacity reaches 0.
$("div").fadeToggle(2000);
Browser View
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:10%;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle(2000);
});
});
</script>
</head>
<body>
<div id="1" ></div><br>
<button>Fade Toggle</button>
</body>
</html>
Related Topics