Introduction:
Here I will explain how to implement simple div with fadein fadeout, fadeto effects using JQuery in asp.net.
Description:
In previous posts I explained Draggable and Resizable example, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how implement simple div with fadein fadeout, fadeto effects in JQuery.
In previous posts I explained Draggable and Resizable example, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how implement simple div with fadein fadeout, fadeto effects in JQuery.
To
implement fadein fadeout, fadeto effects div in JavaScript we need to write
much code but in JQuery we can achieve this
functionality just by simple properties fadein, fadeout and fadeto that would
be like as shown below
<script type="text/javascript">
$(document).ready(function()
{
$('#fadeindiv').fadeIn('slow');
$('#fadeoutdiv').fadeOut('slow');
$('#fadetodiv').fadeTo('slow', 0.2);
});
</script>
|
OR
<script type="text/javascript">
$(document).ready(function()
{
$('#fadeindiv').fadeIn(2000);$('#fadeoutdiv').fadeOut(2000); $('#fadetodiv').fadeTo(2000,0.2);
});
</script>
|
If
you observe above script I used one div with fadeIn, Second div with fadeout
and another div with fadeTo properties.
fadein(): This method display the matched
elements with fade in effect
fadeOut(): This method hide the matched elements with
fade out or transparent effect
fadeTo(): This method fades the matched
elements with opacity. In this we can set the opacity between 0 and 1 (If you
observe above fadeTo method I mentioned
0.2)
If
you want check this code in sample check below code
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery fadein fadeout and fadeTo effects for div example</title>
<style type="text/css">
.fadediv{
width: 150px; height: 50px; padding: 0.5em;background:#EB5E00;color:#fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<body>
<form id="form1"
runat="server">
<h2> jQuery fadeIn, fadeOut and fadeTo effects for div Example</h2>
<table>
<tr>
<td>
<div id="fadeindiv"
class="fadediv">
<b>Click me - fadeIn()</b>
</div>
</td>
<td>
<div id="fadetodiv" class="fadediv">
<b>Click me - fadeTo()</b>
</div>
</td>
<td>
<div id="fadeoutdiv" class="fadediv">
<b>Click me - fadeOut()</b>
</div>
</td>
</tr>
<tr>
<td colspan="3"><button
id="btnReset">Reset</button></td>
</tr>
</table>
<script type="text/javascript">
// Applying fadein effect
$("#fadeindiv").click(function() {
$(this).hide().fadeIn('slow');
});
// Applying fadeout effect
$("#fadeoutdiv").click(function() {
$(this).fadeOut('slow');
});
// Applying fadeto effect
$("#fadetodiv").click(function() {
$(this).fadeTo('slow', 0.2);
});
// Reset the div's
$('#btnReset').click(function() {
$('#fadeindiv').fadeIn('slow');
$("#fadeoutdiv").fadeIn('slow');
$("#fadetodiv").fadeIn('slow');
})
</script>
</form>
</body>
</html>
|
Live
Demo
To check Live demo
click on below div’s
|
||||||||
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
nice post
Dear Sir How can we do automatically fadeout div for certain time and again come in. just like www.jobkunja.com.... can u please explain me that
Note: Only a member of this blog may post a comment.