Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

How to Add Fade In Effect to Webpage using JQuery in asp.net

Sep 2, 2012
Introduction

Here I will explain how to load webpage content with fade in effect using jquery in asp.net.

Description:
  
In previous post I explained hide or show div content elements using JQuery and many articles relating to
JQuery. Now I will explain how to add fade in effect to webpage using Jquery in asp.net.

If we want to implement fade in effect to webpage in jquery we need to write the code like as shown below


<script type="text/javascript">
$(document).ready(function() {
$('#fadediv').fadeIn(2000);
});
</script>
In above script fadediv is the id of the div which is used to load the inside of div content with fadein effect. If you want sample check below code

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Load page with fade in effect using JQuery</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() {
$('#fadediv').fadeIn(2000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="fadediv" style="display:none">
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
</div>
</form>
</body>
</html>
Demo

To check demo click on below link

Click On this Link

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 RSS subscribe by email Subscribe by Email

2 comments :

App reviews said...

It seems to be easy, but I wouldn't guess it by myself. Thanks!

KKL said...

sir i am creating a small social network for my college and i want to add like and commant button which is same as facebook so help me how can i make it????
please sir??
thankyou in advance

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.