In my previous tutorials, I’d explained fadeIn and fadeOut effect using CSS3 transition, most popular fading effects, how to call javascript function from code-behind and other more cracking tutorials on Asp.net, JavaScript, jQuery here.
Now here in this tutorial, I’ll explain you how to give fadeIn and fadeOut effects to any of the html or asp.net controls using jQuery.
We can use fadein effect to show html elements using fadeIn() function and fadeout effect to hide html elements using fadeOut() function in jQuery.
Using jQuery fadeIn() Function Example
You need to use the following code snippet to implement fadeIn effect:
$(‘#btnFadeIn’).click(function () {
//3000 is a time duration(in ms) for transition
$(‘#divFadeInOut’).fadeIn(3000);
return false;
});
Using jQuery fadeOut() Function Example
You need to use the following code snippet to implement fadeOut effect:
$(‘#btnFadeOut’).click(function () {
//3000 is a time duration(in ms) for transition
$(‘#divFadeInOut’).fadeOut(3000);
return false;
});
HTML Markup – [.aspx]
Following is the complete HTML Markup code snippet that I used for demonstration:
<head id=”Head1″ runat=”server”>
<title>FadeIn and FadeOut effect using jquery in asp.net</title>
<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 () {
//FadeIn Effect
$(‘#btnFadeIn’).click(function () {
//3000 is a time duration(in ms) for transition
$(‘#divFadeInOut’).fadeIn(3000);
return false;
});
//FadeOut Effect
$(‘#btnFadeOut’).click(function () {
//3000 is a time duration(in ms) for transition
$(‘#divFadeInOut’).fadeOut(3000);
return false;
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<table cellpadding=”10″>
<tr>
<td colspan=”3″>
Note: First click on “Fade Me In!” and then “Fade Me Out!” to see effects
</td>
</tr>
<tr>
<td>
<asp:Button ID=”btnFadeIn” runat=”server” Text=”Fade Me In!” ClientIDMode=”Static” />
</td>
<td style=”width: 30px;”></td>
<td>
<asp:Button ID=”btnFadeOut” runat=”server” Text=”Fade Out!” ClientIDMode=”Static” />
</td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td colspan=”3″>
<div id=”divFadeInOut” style=”display: none; padding: 10px; width: 100%; color: #fff;
background-color: #ff6600;”>
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
Contents to FadeIn/FadeOut goes here<br />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Example Result
