Syntax for using the animation control

<Ajaxtoolkit: animationextender id = "AE" runat = "server" targetcontrolid = "Ctrl">
<Animations>
<Onload>... </onload>
<Onclick>... </onclick>
<Onmouseover>... </onmouseover>
<Onmouseout>... </onmouseout>
<Onhoverover>... </onhoverover>
<Onhoverout>... </onhoverout>
</Animations>
</Ajaxtoolkit: animationextender>
The attributes are described as follows:
L onload: indicates that the event to be triggered is when the page is loaded.
L onclick: indicates that the event to be triggered is when you click the control.
L onmouseover: indicates that the event to be triggered is mouse sliding.
L onmouseout: indicates that the event to be triggered is when the mouse moves.
L onhoverover: similar to onmouseover, for specific controls.
L onhoverout: similar to onmouseout, for specific controls.
1. animated Effect of Color Changing
In this example, the color of the Panel changes when the mouse slides over the Panel. When the mouse moves, the color of the Panel changes again, which requires "color Animation ". Color animation has four attributes:
L Duration: The time interval between animation display effects.
L propertykey: the property value to be set.
L startvalue: start value of the attribute.
L endvalue: end value of the attribute.

2. animation effects of Fade-in and fade-out merging
fade-in and fade-out effects are often seen on websites. In this example, "Fade Animation" is used to achieve this effect, "Fade Animation" has four attributes:
L Duration: the animation effect interval.
l fps: The display speed of frames per second.
L maximumopacity: maximum transparency.
L minimumopacity: minimum transparency.

3. Separated animation effects of Fade-in and fade-out
in the previous instance, when the mouse slides out, two steps are completed: fade-in and fade-out. In practice, fade-in and fade-out are separated. This example shows how to fade in when the mouse slides out.
"fadein Animation" and "fadeout Animation" are required for this function. The two animation controls share the same attributes. The attributes are as follows:
L duration: animation effect interval.
l fps: The display speed of frames per second.
L maximumopacity: maximum transparency.
L minimumopacity: minimum transparency.

4. scalable animation Effects
In this example, the height and width of the Panel are changed when you click panel. This requires the "resize Animation" animation control. There are five main attributes:
L duration: Specifies the animation effect interval.
L FPS: display speed of frames/s.
L width: The width after the change.
L Height: The height after the change.
L unit: the unit of height and width, usually "PX ".

<Ajaxtoolkit: animationextender id = "animationextender1" runat = "server" targetcontrolid = "Panel1">
<Animations>
<Onclick>
<Resize duration = ". 1" FPS = "20" width = "300" Height = "150" unit = "PX"/>
</Onclick>
</Animations>
</Ajaxtoolkit: animationextender>

5. Action Behavior instance
In addition to some small animation controls, the animation control also supports several special action actions, such as the unavailability of control buttons, hiding buttons, and setting transparency.
1. Set the HTML button with the enableaction control and click it to make it unavailable:

Ajaxtoolkit: animationextender id = "animationextender1" runat = "server"
Targetcontrolid = "BTN">
<Animations>
<Onclick>
<Enableaction enabled = "false"/>
</Onclick> </animations>
</Ajaxtoolkit: animationextender>

2. styleaction is used to design some properties of the control, such as setting the background color and height of the control. It includes three attributes:
L animationtarget: Controls to implement special effects.
L attribute: a property of a control, such as display.
L value: the attribute value, such as "NONE ".
The example is to hide the button after clicking it:

<Ajaxtoolkit: animationextender id = "animationextender1" runat = "server"
Targetcontrolid = "BTN">
<Animations>
<Onclick>
<Styleaction animationtarget = "BTN" attribute = "display" value = "NONE"/>
</Onclick> </animations>
</Ajaxtoolkit: animationextender>

3. opacityaction controls transparency. It mainly includes three attributes:
L duration: Specifies the animation effect interval.
L FPS: display speed of frames/s.
L opacity: the transparency value.
In this example, the transparency of the Panel is changed after the Panel is clicked.

targetcontrolid = "Panel1">