jQuery Fade effects
In this article, we will discuss fade effects in jQuery using some examples.
jQuery fading methods
When we call the jQuery fade methods, JavaScript interpreter just changes the CSS opacity property to give the fade effect animation.
We will see examples of following fading methods:
– fadeOut
– fadeIn
– fadeToggle
– fadeTo
Using the fadeOut( ) Method
Syntax :
$(selector).fadeOut(speed,callback);
Both the parameters speed and callback are optional.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block1 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("#block1").fadeOut();
});
});
</script>
</head>
<body>
<div id="block1">This block would fade-out on click</div>
</body>
</html>
The default fadeOut speed is 400 ms.
We can also define the time taken in milliseconds to fadeout :
$("#block1").fadeOut(1000);
We can also provide slow or fast to the fadeOut method :
$("#block1").fadeOut("slow");
$("#block1").fadeOut("fast");
slow refers to 600 ms and fast refers to 200 ms.
Using the fadeIn( ) Method
Syntax :
$(selector).fadeIn(speed,callback);
Both the parameters spped and callback are optional.
Like the fadeOut method, we can pass a time in milliseconds, slow or fast to the fadeIn method.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block1 {
width: 100px;
height: 100px;
display:none;
background: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#block1").fadeIn("3000");
});
});
</script>
</head>
<body>
<button>
Click to Fade-in block
</button>
<br/><br/>
<div id="block1"></div>
</body>
</html>
jQuery fadeToggle method
fadeToggle method toggles between fadeIn and fadeOut.
Syntax :
$(selector).fadeToggle(speed,callback);
Both the parameters spped and callback are optional.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block1 {
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#block1").fadeToggle("slow");
});
});
</script>
</head>
<body>
<button>
Fade Toggle
</button>
<br/><br/>
<div id="block1"></div>
</body>
</html>
jQuery fadeTo method
Syntax :
$(selector).fadeTo(speed,opacity,callback);
speed and opacity are required parameter. callback is optional parameter.
opacity can be a value between 0 and 1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#block1 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#block1").fadeTo("slow",0.1);
});
});
</script>
</head>
<body>
<button>
Fade To
</button>
<br/><br/>
<div id="block1"></div>
</body>
</html>
© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post
