Creating simple and complex animations with JQuery in ASP.Net applications

This another post that is focusing on how to use JQuery in our ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here

We always wanted to have eye-candy web applications and since the first web pages (simple html) were introduced to the world we wanted to have dynamic effects applied to them.

We achieved that using  DHTML (Javascript & CSS).So Javascript made that possible entirely on the client.Then we wanted to have more complex sophisticated animations in our websites.We could do that with Javascript but it was an overwhelming task and we had to find solutions for the cross browser compatibility issues that were surfacing.

The JQuery library makes it really easy to create smooth animations that work in all browsers. Make sure you will not get carried away and avoid annoying animations. Animations are only for enhancing the usability of the application and enhance the user experience.

In this post (with hands on examples) I will demonstrate how to incorporate JQuery to your ASP.Net applications.

Some basic level of knowledge of JQuery is assumed.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

 

Let's move on with our samples.

1) Launch Visual Studio 2010.  Create an ASP.Net Web application.Choose C# as the development language.Give your application an appropriate name.

2) We want to download and use the latest version of JQuery. We need to download it first. Then we need to remove the version that ships with VS 2010, 1.4.1.We will place inside the Scripts folder the 1.6.3 version of the JQuery library.

3)  Add a new item to your application, a web form. Name it, BasicAnimations.aspx. Do not include the master page. First we need to add some content to the page.

We will create a small table with information regarding Liverpool football players.

We will start with some very basic animations regarding the mouseover, mouseout,click events.

We want to do the following

  • Give the even rows of the table a background color when the page loads for the first time
  • Add a color (background color) as the user hovers over each row
  • Remove the hover color as the user moves out from the row
  • When the user clicks on a row, the background color and the color of the contents of that row should change as well.
  • The user should click a button and then all the rows the user clicked up to that point should get unselected and get back to their original color (as they were when the page was loaded). We want to achieve an inversion of selected rows. Those that the user clicked (changed background color and color) and then by choosing to click this button all the not clicked rows get the same background color as the clicked ones, where the clicked ones revert to their original colours. I hope I make sense....
  • Finally the user should click a button and bring the table back to its original state.

 Let's just assume that those are the effects we need to implement.

4) The markup for the .aspx page follows

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head runat="server">
    <title>Liverpool Football Team Animations</title>
    <link href="Styles/MyStyles.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
 
    <script type="text/javascript">
  
        $(function () {
           
            $('tr:even').addClass('original');
 
 
            $('tr').mouseover(function () {
                $(this).addClass('HighlightHover');
            });
            $('tr').mouseout(function () {
                $(this).removeClass('HighlightHover');
            });
 
           
            $('tr').click(function () {
                $(this).toggleClass('HighlightClick');
            });
          
            $('#Togglebutton').click(function () {
                $('tr').toggleClass('HighlightClick');
            });
          
            $('#Clearbutton').click(function () {
                $('tr.HighlightClick').removeClass('HighlightClick');
            });
        });
    
    
    </script>
</head>
<body>
<h1>Liverpool Football Team</h1>
    <form id="form1" runat="server">
    <div id="DivLive">
        <asp:Table ID="Table1" runat="server"  HorizontalAlign="Center">
        <asp:TableHeaderRow>
        <asp:TableHeaderCell ColSpan="3">Liverpool Squad</asp:TableHeaderCell>
        </asp:TableHeaderRow>
        <asp:TableHeaderRow>
        <asp:TableHeaderCell>Full Name</asp:TableHeaderCell>
        <asp:TableHeaderCell>Position</asp:TableHeaderCell>
        <asp:TableHeaderCell>Date of Birth</asp:TableHeaderCell>
        </asp:TableHeaderRow>
        <asp:TableRow>
        <asp:TableCell>Steven Gerrard</asp:TableCell>
         <asp:TableCell>Midfielder</asp:TableCell>
         <asp:TableCell>30/05/1980</asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
        <asp:TableCell>Dirk Kuyt</asp:TableCell>
         <asp:TableCell>Striker</asp:TableCell>
         <asp:TableCell>22/07/1980</asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
        <asp:TableCell>Jamie Carragher</asp:TableCell>
         <asp:TableCell>Defender</asp:TableCell>
         <asp:TableCell>28/01/1978</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
         <asp:TableCell>Luis Suarez</asp:TableCell>
         <asp:TableCell>Striker</asp:TableCell>
         <asp:TableCell>24/01/1987</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
         <asp:TableCell>Rodriguez Maxi</asp:TableCell>
         <asp:TableCell>MidFielder</asp:TableCell>
         <asp:TableCell>02/01/1981</asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
         <asp:TableCell>Stewart Downing</asp:TableCell>
         <asp:TableCell>MidFielder</asp:TableCell>
         <asp:TableCell>22/07/1984</asp:TableCell>
        </asp:TableRow>
        </asp:Table>
    </div>
    <br />
    <div id="divButtons">
    <button type="button" id="Togglebutton">Toggle Highlight</button>
	<button type="button" id="Clearbutton">Clear</button>
		</div>
    </form>
</body>
</html>

This is the external stylesheet (MyStyles.css)

h1
{
 text-align:center;
 
}
 
#Table1
 
{
 background-color:#D3D3D3;   
 width:800px;
}
 
table,td, th
{
	
	border: 1px solid #990000;
}
 
td
 
{
 text-align:center;  
 font-family:Comic Sans MS;
 font-size:0.9em;
  font-style:italic;
}
 
th
{
 font-family:Century;
 font-size:1.2em;
    
}
		
 
		
.original
{
	background-color: #99CC66;
}
		
.HighlightHover
{
	background-color: #0000FF;
	color: White;
	
}
.HighlightClick
{
	background-color: Blue;
	color: Yellow;
	
}

5) The markup inside the <body> tags is very easy to follow.

In the <head> section I have references to the external .css file and the JQuery library file.

Inside our Javascript code we start by making sure the function will execute when the DOM is fully loaded.

The $(document).ready(function() {
 
});


is the same as calling:

$(function() {

});

I wanted to mention that because many people do not get that. If you want to have a look at the .ready() method click here.

 $('tr:even').addClass('original');

Then we add a background color to the even rows (using Jquery filters) and the addClass method.

Then for the mouseover and the mouseout I add a new class (HighlightHover),new background color for the mouser over event and then remove(removeClass) that class (and background color) as the user mouses out.Here are the snippets for those 2 functions

$('tr').mouseover(function () {
                $(this).addClass('HighlightHover');
     });
$('tr').mouseout(function () {
                $(this).removeClass('HighlightHover');
     });

Then we need to change color and background color when the user clicks a row

 $('tr').click(function () {
                $(this).toggleClass('HighlightClick');
    });

In this case I use the toggleClass method to apply the class in the row when clicked once and when clicked again to remove that class (HighlightClick)

Then I need to implement the feature where the user should click a button and then all the rows the user clicked up to that point should get unselected and get back to their original color where the unclicked ones get the colors, as if they were clicked by the user one by one. We want basically to have the reverse effect.I use the toggleClass again.

 $('#Togglebutton').click(function () {
                $('tr').toggleClass('HighlightClick');
  });
         

 Finally when the user hits the "clear" button to revert anything back to its original position, I use this bit of code (removeClass method) to achieve that.

 $('#Clearbutton').click(function () {
                $('tr.HighlightClick').removeClass('HighlightClick');
  });

 

6) Run your application and browse to the BasicAnimations.aspx. Have a look of what you achieved so far.Experiment with the page.Try all the events described above. It is pretty cool, isn't it? We have done all that with very very little Javascript code. This code works across all major browsers.I hope that you start  to realise the power of JQuery and why Microsoft is so keen on this lightweight super efficient Javascript Library.

 

7) Let's move on to a more complex animation. Add a new item to your application, a web form. Name it ComplexAnimations.aspx

We will have to add some content to this page. I have added 4 paragraphs from Wikipedia regarding Liverpool football club from Wikipedia. You can copy this text or any other text you want and place it inside a <p> tag.

8) We want to add some animation to the paragraph. We want to add two buttons. By clicking those buttons we want to fade in and fade out the text in the paragraph.

Let me show you how to achieve that.

 

My markup so far looks something like this 

    <p id ="LivDesc">
    Liverpool Football Club is an English Premier League football club based in Liverpool, Merseyside......
.............
    </p>
    </div>
 
    <br />

<button type="button" id="FadeOut">Fade Out</button>
<button type="button" id="FadeIn">Fade In</button>

 Inside the <head> section of the.aspx page we have to type the following

 

<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
	<script type="text/javascript">
 
    $(function () {
	$('#FadeOut').click(function () {
		$('#LivDesc').fadeOut('slow');
	});
	$('#FadeIn').click(function () {
	        $('#LivDesc').fadeIn('slow');
	});

 

});
 
	</script>

 

As you can see the javascript code is pretty simple. I am using the fadeOut and fadeIn methods . Run your application and click the buttons to see the effects for yourself.

'slow' can be supplied as a parameter to indicate a duration of 600 milliseconds.

A lot of people like the Toggle effect, where the user hits the same button once and something happens and then hit it again and the opposite happens. We must another button.

  <button type="button" id="Toggle">Toggle</button>

 The javascript code follows

 

    $('#Toggle').click(function () {
	            $('#LivDesc').toggle('slow');
	        });

 I use the toggle() method.

'slow' can be supplied as a parameter to indicate a duration of 600 milliseconds. View the page in the browser and click the Toggle button. See the animation for yourself.

Well, you can have the same effect as "Toggle" by using the hide() and show() methods.

Add two more buttons to the .aspx page

 <button type="button" id="Hide">Hide</button>
 <button type="button" id="Show">Show</button>

 The javascript code follows

  $('#Hide').click(function () {
	$('#LivDesc').hide('slow')
});
  $('#Show').click(function () {
        $('#LivDesc').show('slow');
});

This is very easy Javascript code to achieve this nice animation.

View the page in the browser and click the buttons. See the animation for yourself.

 We can combine some of these effects in the click event of a single button. We add a new button

 <button type="button" id="Complex">Complex animation</button>

 

The Javascript code for the complex animation follows

     $('#Complex').click(function () {
	            $('#LivDesc')
		.fadeOut('slow').delay(1500)
		.fadeIn('slow').delay(1500)
		.slideToggle('slow').delay(1500)
		.slideToggle('slow').delay(1200)
		.fadeTo(1000, 0.20).delay(1200)
		.fadeTo(1200, 1);
 
	        });

9) I use the fadeOut() and fadeIn() methods on the paragraph with a delay of 1.5 seconds.

I use the slideToggle()  which first hides the paragraphs with some motion and then shows it again with some motion and some delay between them.

Then I use the fadeTo() method to adjust the opacity of the paragraphs to 0.2 and then gradually back to 1.

View the page in the browser and click the button. See the animation for yourself.

In this last sample I will use the animate() method to achieve some nice complex animations.This is a very flexible and customisable animation.

This method lets you set targets for CSS properties like top,left,font-size.

Add another web form to your application. Name it MainAnimation.aspx.We will need to add some content and some buttons in our page.

I am going to use the same paragraph as in the previous example.This is the paragraph I want to animate.

 <p id ="LivDesc">
    Liverpool Football Club is an English Premier League football club based in Liverpool, Merseyside......
.............
    </p>
    </div>
 
    <br />

 

10) Add another item on your application, a stylesheet. Name it complex.css. Place a reference of it in the <head> section of the .aspx page.

 The contents of the .css file follow

#LivDesc
{
    
background-color: #E2E6DE;
border: 1px solid #00FFFF;
width: 700px;
position: absolute;
top: 250px;
left: 100px;
color:Olive;
font-family:Century;
			
}

 

The first animations I would like to do is to add four buttons so I can move the paragraph around on the page.

 Just after the paragraph add four buttons. When clicked those buttons will move the paragraph on the left,right,up,down directions on the page.

<button type="button" id="btnMoveLeft">Move Left</button>
<button type="button" id="btnMoveRight">Move Right</button>
<button type="button" id="btnMoveUp">Move Up</button>
<button type="button" id="btnMoveDown">Move Down</button>

 Now we need to add the javascript code to implement the animations. This is what I have inside the <head> section of the page.

 <script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <link href="Styles/complex.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {

            $('#btnMoveRight').click(function () {
                $('#LivDesc').animate({ left: "+=30px" }, 500);
            });
            $('#btnMoveUp').click(function () {
                $('#LivDesc').animate({ top: "-=30px" }, 500);
            });
            $('#btnMoveDown').click(function () {
                $('#LivDesc').animate({ top: "+=30px" }, 500);
            });
 

 
        });
	</script>

It is very easy to see what I do here. I attach the click event to those buttons and then use the animate method to move the paragraph accordingly. Note that the original values of (top and left positioning) are defined in the .css file. The duration of every movement is (500 ms) 0.5 seconds.

Run your application and click on the buttons. You will see the desired effects.

11) We can chain those movement animations together.That basically means is that we chain together multiple calls of the animate() method.

We have to add another button in  our page. 

 <button type="button" id="btnChain">Move all over</button>

 This is the javascript code we must place in the <script> block

          $('#btnChain').click(function () {
                $('#LivDesc').animate({
                    top: "500px",
                    left: "100px"
                }, 3000)
		.animate({
		top: "600px",
		left: "150px"
		}, 2000)
		.animate({
		top: "200px",
	        left: "500px"
		}, 1000);
            });

 

View the page in the browser and see the desired effect when clicking the button.

Νow I would like to show the final animation, which gives the paragraph the bounce effect.

We have to add another button in  our page. 

 <button type="button" id="btnBounce">Bounce Me!!!</button>
 
 This is the javascript code we must place in the <script> block
 
 $('#btnBounce').click(function () {
                $('#LivDesc').animate({ padding: "60px" }, 'slow')
.animate({ paddingLeft: "2px", paddingTop: "2px" }, 'slow')
.animate({ paddingLeft: "60px", paddingTop: "60px", paddingRight: "2px", 
paddingBottom: "2px" }, 'slow')
.animate({ paddingLeft: "2px", paddingTop: "2px", paddingRight: "60px",
 paddingBottom: "60px" }, 'slow')
.animate({ paddingLeft: "60px", paddingTop: "60px" }, 1000)
.animate({ padding: "0px" }, 1000);
     });

This is another example of multiple calls (chained) to the animate() method.I do that by changing the values of the padding values.

View the page in the browser and see the desired effect when clicking the button. 

There are some limitations to the animate() method. We can't animate colors for example.We can only animate and set single numeric CSS properties.Shorthand CSS properties are not supported like border,margin,padding.

Email me if you need the source code!!!

Hope it helps!!!!

1 Comment

Comments have been disabled for this content.