Animation Effects using Ajax AnimationExtender Control
AJAX AnimationExtender is an excellent Ajax control to add animation effects on your website. Resizing controls, Moving controls, changing background color, fade in-fadeout control, hide-unhide controls etc. This control has a number of triggers and events that let you add dynamic effects on your website.
Properties of AJAX AnimationExtender Control
TargetControlID: ID of the control on which you want to add animation effects
OnMouseOver: Animation effects to be played when the mouse is moved over the target control.
OnMouseOut: Animation effects to be played when the mouse moves out of the target control.
OnHoverOver: Similar to OnMouseOver, Animation effects to be played when the mouse is moved over the target control. Difference is it will stop the animation effects of OnHoverOut event, if any, before playing its animation effects.
OnHoverOut: Similar to OnMouseOut, Animation effects to be played when the mouse is moved out of the target control. Difference is it will stop the animation effects of OnHoverOver event, if any, before playing its animation effects.
OnLoad: Fired as soon as the target control is loaded.
OnClick: Fired when the target control is clicked.
Methods of AJAX AnimationExtender Control
DisposeAnimation () - Stops the current running animation effects
Dispose () - Dispose the behavior along with its animation effects
Play () - Start the animation if not started. If already started, this method will have no effect
Stop () - Stop the animation if not stopped. If already stopped, this method will have no effect
Quit () - Stop all the animation effects. Unlike the stop method which completes the final state of the animation, this method will stop the running animation effect immediately without completing its final state.
Sample Example
To explain the various method and properties of AnimationExtender control, I have used the below code. In this chunk of code, I have used two AnimationExtender control First AnimationExtender control has animation effects for three events: Load, Click and MouseOver. Second animation control shows the animation effect for OnHoverOut and OnHoverOver event.
On loading of Panel1, runs a sequence of animation effects: First the color of my target control Panel1 changes from Orange to Blue, next the opacity of imgAjax control is set to 0.5
On Clicking Panel1, runs a sequence of animation effects: Disable txtDisable textbox, Resize panel1, fadeout in 2 seconds at the rate of 20 frames per second.
Before click OnMouseOver will fire and the following animation effects will take place: Hide Label, Show Ajax loader image, Fadein imgAjax and at the same time increase image size by 400%
Similarly the second AnimationExtender Control is self explanatory. Script action is used to execute JavaScript code.
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<Sequence>
<Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style"
PropertyKey="color" />
<OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />
</Sequence>
</OnLoad>
</Animations>
<Animations>
<OnClick>
<Sequence>
<EnableAction AnimationTarget="txtDisable" Enabled="false" Duration="2" />
<Resize Width="200" Height="150" />
<FadeOut Duration="2" Fps="20" />
</Sequence>
</OnClick>
</Animations>
<Animations>
<OnMouseOver>
<Sequence>
<StyleAction AnimationTarget="lblHide" Attribute="display" Value="None" />
<StyleAction AnimationTarget="imgAjax" Attribute="display" Value="Block" />
<Parallel AnimationTarget="imgAjax" Duration="1">
<