Hello in this post i will show how to use Jquery fadein , fadeout, fadeToggle and fadeTo in asp.net
1. fadeIn : It will load or show the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).
2. fadeOut : It does the opposite of what fadeIn does. It will hide the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).
3. fadeToggle: This option does the job of both the above types. It toggles between fade in and out. its like On and Off.
4. fadeTo : This is completely different from all them mentioned above. It toggles between the opacity of the image as per the given strength. Higher the strength the transparency of the element will be high.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ImageDiv').fadeIn(4000);
});
$(document).ready(function () {
$('#ImageDiv1').fadeOut("slow");
});
$(document).ready(function () {
$('#ImageDiv2').fadeToggle(5000);
});
$(document).ready(function () {
$('#ImageDiv3').fadeTo("slow", 0.4);
});
$(document).ready(function () {
$("button").click(function () {
$("#ImageDiv2").fadeToggle(3000);
});
});
</script>
</head>
<body>
<div id="ImageDiv" style="display: none">
<img alt="Lion" src="download.jpg" />
</div><br />
<div id="ImageDiv1">
<img alt="Lion" src="download.jpg" />
</div><br />
<button>Fade Toggle</button>
<div id="ImageDiv2">
<img alt="Lion" src="download.jpg" />
</div><br />
<div id="ImageDiv3">
<img alt="Lion" src="download.jpg" />
</div><br />
</body>
</html>
1. fadeIn : It will load or show the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).
2. fadeOut : It does the opposite of what fadeIn does. It will hide the element as per the given speed( 3000,2000 milliseconds) or value ( slow,fast).
3. fadeToggle: This option does the job of both the above types. It toggles between fade in and out. its like On and Off.
4. fadeTo : This is completely different from all them mentioned above. It toggles between the opacity of the image as per the given strength. Higher the strength the transparency of the element will be high.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ImageDiv').fadeIn(4000);
});
$(document).ready(function () {
$('#ImageDiv1').fadeOut("slow");
});
$(document).ready(function () {
$('#ImageDiv2').fadeToggle(5000);
});
$(document).ready(function () {
$('#ImageDiv3').fadeTo("slow", 0.4);
});
$(document).ready(function () {
$("button").click(function () {
$("#ImageDiv2").fadeToggle(3000);
});
});
</script>
</head>
<body>
<div id="ImageDiv" style="display: none">
<img alt="Lion" src="download.jpg" />
</div><br />
<div id="ImageDiv1">
<img alt="Lion" src="download.jpg" />
</div><br />
<button>Fade Toggle</button>
<div id="ImageDiv2">
<img alt="Lion" src="download.jpg" />
</div><br />
<div id="ImageDiv3">
<img alt="Lion" src="download.jpg" />
</div><br />
</body>
</html>
Result:
No comments:
Post a Comment