Animation extender in ajax sample/example in asp.net

Animation extender in ajax sample/example in asp.net  

In this topic we are going to see Animation extender in ajax sample/example in asp.net .

The AnimationExtender server control provides a tremendous amount of capabilities. It enables you to program fluid animations to the controls that you put on the page. You can do a lot with this control much more than can be shown in this example. 

This control enables you to program elements that can move around the page based on specific end-user triggers (such as a button click). Specific events are available for you to program your animations against.

These events are as follows:

➤ OnClick
➤ OnHoverOver
➤ OnHoverOut
➤ OnLoad
➤ OnMouseOver

➤ OnMouseOut

Creating animations is not as straightforward as many would like because it has little Visual Studio support, such as wizards or even IntelliSense.

For an example of creating your first animation, the following example shows how you can fade an element in and out of the page based on an end-user action.

Using the AnimationExtender to fade a background color:-

Output:

In this case, when you run the example, you will see that it uses a single AnimationExtender control that is working off the Panel1 control. This connection is made using the TargetControlID property. As stated, IntelliSense is not enabled when you are typing the code that is contained within the AnimationExtender control, so you need to look in the documentation for the animations that you want to create. In the case of the previous example, the <OnClick> element is utilized to defi ne a sequence of events that needs to occur when the control is clicked. For this example, only one animation is defined within the <Sequence> element a color change to the background of the element.

Here, the <Color> element states that the background CSS property will need to start at the color #999966 and change completely to color #FFFFFF within 5 seconds (defined using the Duration property). When you open this page and click the Panel element, you will see the color change in a 5-second duration from the described start color to the end color.