.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Sandeep Singh
Mayuri
stevemarkayden
kumarfurima
Preethi

  

Animation Text or control using JQuery

   
 
     


Introduction :

In this tutorial we will see how Perform animation of the text or the control using JQuery in asp.net. A very simple animation in few lines of code.

In This tutorial we will see how to start using JQuery in Asp.Net. In this example we will Animate the control and text.

In This tutorial we going to use animate() function of JQuery to perform animation

Step 1: Create new Web Project using Visual Studio.Net

Step 2: Now go to .aspx page and write one div tag and assign the  div id to dvText for eg <div id="dvText"> </div>

Now write something in the div tag

For eg

<body>
    <form id="form1" runat="server">
    <a href="#" id="aAnimation">Animation</a>
    <div id="dvText">
     This is JQuery Tutorial, This is JQuery Tutorial, This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial,
     This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial 
    </div>
    </form>
</body>


Step 3: Download the JQuery Library from JQuery.com website and keep this library to one script folder in your application and we assign the folder name to Script

Now add the reference of this JQuery Library in you .aspx page like this inside the <Head> tag

<head id="Head1" runat="server">
    <title>JQuery Sample</title>
    
    <script src="Script/jquery-1.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">

So lets start writing the JQuery code 

$(document).ready(function() {
           //you Jquery Logic goes here
});

The above code will hide the div tag

Step 4: Create anchor tag and using this we will animate the div tag like this

<a href="#" id="aAnimation">Animation</a>

Now for this two we will write the JQuery code like this inside JQuery Ready function

  

 // For Animation of the Text
            $('#aAnimation').click(function() {
                $('#dvText').animate({
                    opacity: 0.50, //Opacity if you want to set
                    left: '+=50',
                    height: 'toggle'
                }, 5000, function() {

                });
            });

lets see the full JQuery Code for  this example to show/hide the div tag in asp.net

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>JQuery Sample</title>
    
    <script src="Script/jquery-1.4.min.js" type="text/javascript"></script>
    					
    <script type="text/javascript">

        $(document).ready(function() {
           
            // For Animation of the Text
            $('#aAnimation').click(function() {
                $('#dvText').animate({
                    opacity: 0.50, //Opacity if you want to set
                    left: '+=50',
                    height: 'toggle'
                }, 5000, function() {

                });
            });

        });
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
       <a href="#" id="aAnimation">Animation</a>
     <a href="#" id="aAlert">Show Alert Message</a>
    <div id="dvText">
     This is JQuery Tutorial to perform animation, This is JQuery Tutorial for animation, This is JQuery Tutorial for basic animation, This is JQuery Tutorial simple animation , This is JQuery Tutorial , This is JQuery Tutorial,
     This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial , This is JQuery Tutorial 
    </div>
    </form>
</body>
</html>
Other Tutorials in the same Category:
      
  • JQuery In Asp.Net      
  • How to Start using JQuery      
  • Show hide control using JQuery      
  • Slide the Text or control using JQuery      
  • Animation Text or control using JQuery

  •  
         
     
    Return to Main Index Page


    Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend