Professional ASP.NET 3.5 AJAX

10.1. Working with the Animation Control

The AnimationExtender control is part of the ASP.NET AJAX Toolkit. It is important to think of it as complete framework that can be used in your application to provide the fluidity that you are looking for rather than as simply another server control.

Using animations enables you to transition from one state to another. For instance, you can transition something on the page from one location to another. Animations aren't restricted to positioning elements, you can also use them to change other aspects of a control or series of controls in some sort of transition. For instance, you can slowly change the color of text, or fade things in and out. There is quite a bit that DHTML can do.

You can also initiate transitions based on an end user action (such as a button click). There are specific events that you can program your animations against. These events are as follows:

• OnClick

• OnHoverOver

• OnHoverOut

• OnLoad

• OnMouseOver

• OnMouseOut

For an example of this, let's work through a simple example of applying an animation to a Label control.

10.1.1. Animating a Single Control

In this example, a single animation is applied to a single control on the page. To work along, create a page that contains a TextBox, a Button, and a Label control. An example of this layout is presented in Figure 10-1.

Figure 10-1. Figure 10-1

The code of the page for this example ...