AJAX Control Tutorial AnimationExtender How to select an animation out of a list.

AJAX Control Tutorial AnimationExtender How to select an animation out of a list.



In Today’s tutorial we will go over the Animation Extender and how to select one animation of a list of animations.

Pre Requisite

We are using Visual Studio 2010, to perform these tutorials, if you do not have a copy of Visual Studio 2010, you can download it at www.Microsoft.com alternatively; Microsoft has been nice enough to provide a free download of Visual Web Developer.

Before we begin, we suggest you download the source code, to follow along step by step.

Did you know?

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.


Let’s Begin

1.       Before we can begin, we must add a ToolScriptManager you can drag and drop this from the AJAX Control Toolkit.

2.       Next up we are going to add a Panel Control. Add some text to the panel, separated by <br />.

3.       You will want to set the Panel ID to something you will remember. ID=”panel1” for example. Also since we are adding styling reference the style sheet as well for example CssClass=”panelclass”

4.       The associated CSS class for the panel defines a background color and width. You can use your own settings or you may use ours when you downloaded the source file.

5.       Next up, is adding the animation extender. You can drag and drop this one as well from the AJAX Control Toolkit.

6.       Here is where we needed to remember that ID for the Panel we set up earlier, since were are going to reference it in the properties section. Set the TargetControlId to the panel you added earlier.

7.       After you have set the Target control, you can go to the properties section and set the parameters for the animation. You can set the Duration of the Animation, such as 1.5 or 10 seconds, how you want the animation to execute, for example on mouse over or on page load. It’s really up to you. To see how we set it you can always download the source code file.

8.       Now we add <Animations> node, we will use<onLoad> to run the animations once the page has finished loading.

<asp:Panel ID="panelFade" runat="server" CssClass="panelClass">

            <asp:AnimationExtender ID="ae" runat="server" TargetControlID="panelFade">



 <Case SelectScript="Math.floor(3 * Math.random())">

 <Resize Width="1000" Unit="px" />

 <Resize Height="150" Unit="px" />

 <FadeOut Duration="1.5" Fps="24" />

9.       Now instead of using one of the regular <animations>, we will use the <Case> element. The Value of the value of its SelectScript attribute is evaluated; the return value must be numerical. Depending on this number, one of the sub animations within <Case> is executed. For instance, if SelectScript evaluates to 2, the Control Toolkit runs the third animation within <Case> (counting starts at 0).

10.    The following markup defines three subanimations: Resizing the width, resizing the height, and fading out. The JavaScript code (Math.floor(3 * Math.random())) then picks a number between 0 and 2, so that one of the three animations is run:

<Case SelectScript="Math.floor(3 * Math.random())">




There you go; you just learned how to select an animation from a set of animations.

See how easy that was?

Not as easy when,


We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect'shelp, we were able to avoid any headaches!

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.





Sengkang EC said:

The condo’s facilities provide full family entertainment needs for your family and loved ones. Indulge in a serene and tranquil lifestyle right in the heart of Sengkang and Fernvale

Posted Jun 21, 2013 12:49 AM
Timberland Shoes said:

There are no comments yet...Kick things off by filling out the form below.

Posted Jun 25, 2013 5:47 AM
jas said:


Posted Jul 1, 2013 7:13 AM
Event Staffing Agency said:

There are a lot of informative posting therefore, i want to say thanks for the information.

Posted Jul 17, 2013 7:39 AM
Matt Considine said:

This is an awesome page. It consists of a lot of vital content and articles using this question. data basing the software right into any readable and additionally well crafted content

Posted Jul 20, 2013 7:33 PM
Matt Considine said:

Your website is very informative. It will be useful for all of us. You have completed a best work. I will come here again to analyze new updates. Thanks for posting.

Posted Jul 20, 2013 7:44 PM
enterprise password management said:

Be aware that you will not be able to access your hotmail account using your smartphone, as hotmail doesn't support this.

Posted Jul 22, 2013 1:03 AM
Pasir Ris Drive EC said:

Also, nature awaits your family and friends at the nearby Pasir Ris Park which is just beside Pasir Ris EC. Also, the ultimate nature awaits you at the Pasir Ris

shoreline in the Jalan Loyang Besar area.

Posted Jul 28, 2013 9:56 PM
Kappy said:

Nice post. Never worked on animations. Will definitely run the code.

Posted Jul 30, 2013 2:18 AM
password manager said:

If you plan on having company over to socialize often, or just want some kind of room seperate from the living and cooking areas of the apt...a one bedroom is best.

Posted Jul 30, 2013 5:01 AM
grails ajax tutorial said:

Thanks for the tutorial. I will try if this is possible with Mono, as I don't have Visual Studio in my Linux desktop

Posted Aug 3, 2013 10:16 AM
Sembawang EC said:

Future residents will be able to walk to the nearby Sun Plaza or a short drive to Causeway Point for some family fun and gatherings. A truly unique lifestyle awaits you at Sembawang EC.

Posted Aug 4, 2013 11:14 PM
Ph metre said:

Your website is very informative.

Posted Aug 7, 2013 2:13 PM
Orenj Technology said:

I find it easy to follow the steps on how to select an animation on the list. Thanks for taking the time to post this entry to help your fellow programmer online.

Posted Aug 28, 2013 1:39 AM
chapter7counsel said:

To be a good investment banker you will need a strong basic understanding of accounting, finance and economics. You will need a razor sharp mind, quick decision making capabilities, capability to work under pressure and for long hours and an appetite for the latest news and information to predict and appraise.

Posted Aug 28, 2013 5:37 AM
www.nutritioneducation101.com said:

Scientific nutritionists usually practice in medical care settings and also work along with other providers to generate diet ideas that deal with a patient's condition. A nutritionist that is employed inside the managerial market might have to supervise food planning and also dietetic intake over a broader level.

Posted Sep 2, 2013 4:01 AM
www.cheapdurpalhosting.com said:

My partner and i completely comprehend! My males are 12 & twenty four and My partner and i still have got boxes of these baby garments, all their particular GI Joe's and each piece of art work they will ever would. I can not believe my own babies acquired the nerve to cultivate up! I really do have a lovely, precious granddaughter which is sweet, lovable, funny, and fills that area and must care and also nurture slightly one.

Posted Sep 2, 2013 4:02 AM
christian louboutin shoes said:

<a href="http://www.newlouboutinonsale.com">cheap christian louboutin shoes</a>

Posted Sep 16, 2013 1:13 AM
Sky Vue Capitaland said:

Sky Vue Condo will be accessible via public transport along Bishan Road. Commuting to Toa Payoh and Serangoon area as well as the city area is therefore very convenient. It is also near to many eateries along the Upper Serangoon area as well as the Thomson area.

Posted Sep 17, 2013 12:56 AM
Josh said:

Very well written and helpful example. Worth trying.

Posted Sep 18, 2013 3:34 AM
Uçak Kiralama said:

thanks admin for nice post

Posted Sep 20, 2013 7:00 AM
help me write my essay said:

AJAX Control Tutorial AnimationExtender realy tell us that How to select an animation out of a list.I was some confusions which are clear now after reading it.

Posted Sep 29, 2013 4:25 PM

Leave a Comment