Jquery methods to adjust the opacity of elements
Using Jquery, We can adjust and play with opacity of HTML element(s). Using Jquery fading methods we can animate the elements with Opacity. These methods will give good look at show and hide kind of UI things.
In Jquery we have four methods to adjust and play with opacity of HTML element(s). we can called those are as Fading methods also. Those are
1.fadeIn
2.fadeOut
3.fadeTo
4.fadeToggle
Using these methods we can animate the elements with fading effect. Let us see how to do that.
1.fadeIn: fadeIn method functionality will show the hide (display:none) element with an animation from 0 opacity to 1, in given duration.
example:
<!DOCTYPE html>
<html>
<head>
<style>
#fadein
{
display:none;
height:200px;
width:200px;
border:1px solid black;
background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="fadein"></div>
<input type="button" id="but" value="click"/>
<script>
$(document).ready(function()
{
$('#but').click(function()
{
$('#fadein').fadeIn(500);
});
});
</script>
</body>
</html>
1.fadeOut: fadeOut method functionality will hide the element with an animation from 1 opacity to 0, in given duration.
example:
<!DOCTYPE html>
<html>
<head>
<style>
#fadeout
{
height:100px;
width:100px;
border:1px solid black;
background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="fadeout"></div>
<input type="button" id="fadeoutbut" value="Fadeout"/>
<script>
$(document).ready(function()
{
$('#fadeoutbut').click(function()
{
$('#fadeout').fadeOut(1000);
});
});
</script>
</body>
</html>
1.fadeTo: fadeTo method functionality will show the hide or normal element to a particular opacity with an animation, in given duration.
example:
<!DOCTYPE html>
<html>
<head>
<style>
#fadeto
{
height:100px;
width:100px;
border:1px solid black;
background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="fadeto"></div>
<input type="button" id="fadetobut" value="Fadeto"/>
<script>
$(document).ready(function()
{
$('#fadetobut').click(function()
{
$('#fadeto').fadeTo(100,0.5);
});
});
</script>
</body>
</html>
1.fadeToggle: fadeToggle method functionality will show or hide the elements to a opacity 0 or 1 with an animation, in given duration.
example:
<!DOCTYPE html>
<html>
<head>
<style>
#fadetoggle
{
height:100px;
width:100px;
border:1px solid black;
background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="fadetoggle"></div>
<input type="button" id="fadetogglebut" value="Fadetoggle"/>
<script>
$(document).ready(function()
{
$('#fadetogglebut').click(function()
{
$('#fadetoggle').fadeToggle(100);
});
});
</script>
</body>
</html>
I have given the same code in jsfiddle, the URL is given below.
http://jsfiddle.net/shivakumar/sTJeT/1/