In this example, we will see that how to display/hide div element with fading effect using jQuery 1.4.4, fadeToggle() Method is added in jQuery 1.4.4. This is the combination of fadeIn() and fadeOut().
Here's is the solution
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display/hide div element with fading effect using jQuery 1.4.4 in asp.net
</title>
<style type="text/css">
html, body
{
font-family: Verdana;
font-size: 11px;
margin: 10px;
}
#Effect
{
border: 1px solid #eaeaea;
background-color: #f2faf3;
width: 200px;
min-height: 150px;
padding: 10px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function () {
jQuery('#<%=tbClick.ClientID %>').click(function (eh) {
$('#Effect').fadeToggle(1000);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Display/hide div element with fading effect using jQuery 1.4.4 in asp.net</h2>
<asp:Button ID="tbClick" runat="server" Text="Click to toggle" />
<p>
<div id="Effect">
Welcome to asptutorial.com<br />
Author:Aamir Hasan
</div>
</p>
</div>
</form>
</body>
</html>
Output
Download
fadeToggle() Method.zip (1.18 kb)
See live demo