Next up in this series is control animation.  The Ajax Control Toolkit has an Animation Control Extender [ see HERE ].

jQuery has animation built-in to its code [ see HERE ]

Basically, with jQuery animation you can animate any DOM object that you are access pragmatically.

Understand that animation is a huge subject and the variety of effects you can accomplish with jQuery animation is limited only by your imagination. One could write an entire book on jQuery animation and I’m not a “designer”.

I’ll show you a basic animation to get you started.

Here is the animation behavior I want.

Click on the image for a short video that shows the animation.

Here is the entire ASPX page.

Note that the positioning of the Button control is absolute and, for the sake of a simple demo, I’ve just hard-coded the position to work with a 1024×768 resolution. In production I’d have to dynamically determine the correct starting position.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <script src='Scripts/jquery-1.4.1.js' type='text/javascript'></script>
    <style> 
    .block  { 
        position:absolute; 
        background-color:#abc; 
        border-top-width: medium;
        left:30px; 
        width:90px; 
        height:90px; 
        margin:5px;
        top: 280px;
        } 
    </style> 
</asp:Content>

<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>jQuery has rich Animation.</h2>
    <p>
        <asp:Label ID='ResultLabel' runat='server' Text='&nbsp;'>
		</asp:Label><br />
    </p>
        
    <button id='left'>"</button> <button id='right'>"</button><br /> 
    <asp:Button ID='AnimatedButton' class='block' runat='server' 
	            Text='ASP Button' 
                ClientIDMode='Static' onclick='AnimatedButton_Click' />
    <br /><br /><br /><br />&nbsp;SECRET !
    <script type='text/javascript'>
        $('#right').click(function () {
            $('.block').animate({ 'left': '+=150px' }, 'slow');
        });

        $('#left').click(function () {
            $('.block').animate({ 'left': '-=150px' }, 'slow');
        }); 
 
    </script> 

</asp:Content>

By now (assuming that you have been following this series) you are starting to get comefortable with jQuery so the code should be pretty understandable. I’m simply using a selector to get the Botton Object by it’s class association (take note of the ClientId setting on the ASP.NET Button control) and calling the .animate method.

You can check out the documentation for all the available options here : http://api.jquery.com/animate/

Since I’m somewhat “creativly challenged”, here are some additional resources to help you get started with animation ideas.