fade method in jquery with example
1. The fadeIn(), fadeOut() and fadeTo() methods are use to animate the opacity of elements.
2. We can specify the duration of fading in milliseconds or by specifying strings 'fast' and 'slow'.
3. Fast indicates 200 milliseconds and slow indicates 600 milliseconds.
4. If you do not specify anything, by default it takes 400 milliseconds.
Example 1 :
<html>
<head>
<title>fade in jQuery</title>
<style>
fieldset
{
width:300px;
margin-left:400px;
}
#buttonDiv
{
margin-left:400px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#buttonHide").click(function () {
$("#form").fadeOut("slow", function () {
alert("FadeOut done !!!");
});
});
$("#buttonShow").click(function () {
$("#form").fadeIn(1000, function () {
animate();
});
});
});
function animate() {
alert("FadeIn Done !!!");
}
</script>
</head>
<body>
<fieldset id="form">
<legend>Form</legend>
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" id="txtName"><td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><input type="text" id="txtAge"><td>
</tr>
<tr>
<td><label>Address:</label></td>
<td><input type="text" id="txtAddress"><td>
</tr>
</table>
</fieldset>
<div id="buttonDiv">
<input type="button" id="buttonHide" value="Fade Out"/>
<input type="button" id="buttonShow" value="Fade In"/>
</div>
</body>
</html>
Demo :In the above example, we have used fadeOut() and fadeIn() method. In case of fadeOut() method, we have specified duration using "slow" and calling alert in the callback function.
In case of fadeIn() method, we have specified duration in milliseconds and called animate function in callback function, which displays alert.
Callback function is called once animation is done.
Example 2 :
<html>
<head>
<title>Slide Event</title>
<style>
fieldset
{
width:300px;
margin-left:400px;
}
#buttonDiv
{
margin-left:400px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#buttonFadeTo').click(function () {
$('#form').fadeTo('slow', 0.5, function () {
alert("FadeTo Done !!!");
});
});
});
</script>
</head>
<body>
<fieldset id="form">
<legend>Form</legend>
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" id="txtName"><td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><input type="text" id="txtAge"><td>
</tr>
<tr>
<td><label>Address:</label></td>
<td><input type="text" id="txtAddress"><td>
</tr>
</table>
</fieldset><br />
<div id="buttonDiv">
<input type="button" id="buttonFadeTo" value="Fade To"/>
<input type="button" id="reset" value="Reset" onclick="location.reload()"/>
</div>
</body>
</html>
Demo :In above example we have use fadeTo() method, which accepts the duration as first parameter. We have supplied slow as duration which indicates 600 milliseconds.
Second parameter accepts the scale of opacity, opacity should be supplied between o and 1. Finally we have called callback function which is called after animation is finished.
0 comments:
Post a Comment