Ajax AnimationExtender Control

Introduction

In this article we are going to discuss about AJAX AnimationExtender control.
 
If you want to use animation to the web pages, then you have to use AnimationExtender control. It provides good animation effect such as moving an ASP Control to a new place, resizing it, modifying its color, or making it fade in or fade out. In this article I m going to use fade in or fade out animation.
 
The animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description
 
TargetControlID: ID of the target control whose events are used to animate (this is also the default target of the animations)

OnLoad: Generic animation played as soon as the page is loaded.

OnClick: Generic animation played when the target control is clicked.

OnMouseOver: Generic animation played when the mouse moves over the target control.

OnMouseOut: Generic animation played when the mouse moves out of the target control.

OnHoverOver: Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays.

OnHoverOut: Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays.
 
First of all make a new website using Ajax Enabled website. The advantage to using Ajax enabled website is no need to add ScriptManager control on page and no need to add Ajax Control toolkit. Like this:


 
First of all drag and drop Animation control on page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Image1">
<Animations>
<OnLoad>
<FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
</OnLoad>
<OnHoverOut>
<Sequence>
<FadeOut Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
</Sequence>
</OnHoverOut>
<OnHoverOver>
<FadeIn Duration=".5" MinimumOpacity=".2" MaximumOpacity="1" />
</OnHoverOver>
</Animations>
</cc1:AnimationExtender>
<asp:Image runat="server" ID="Image1" ImageUrl="~/Sunset.jpg" BorderWidth="0px" Width="342px" />
 
After running result should be look like this:


 
Now check result on MouseHover on this picture. Result should be look like this:


 
For more information download source code zip file.