aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Friday, November 12, 2010 Total Views:  

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

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5