Home > DeveloperSection > Articles > Ajax Toolkit AnimationExtender Control in ASP.Net

Ajax Toolkit AnimationExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 10282  View(s)
Rate this:

Ajax Toolkit AnimationExtender Control in ASP.Net

The AnimationExtender control plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.

Animation Properties:

·         TargetControlID - ID of the target control whose events are used to animate.

·         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

Code:

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%-- Add the animation extender and use the animation tag-%>

<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">

<Animations>

<OnClick>

<Sequence>

<Color AnimationTarget="Button1" Duration="50" StartValue="#FF0000" EndValue="#666666" PropertyKey="backgroundColor" />

<EnableAction Enabled="true" />

</Sequence>  

</OnClick>

</Animations>

</cc1:AnimationExtender>

 

<asp:Panel ID="Panel1" runat="server">

<asp:Button ID="Button1" runat="server" Text="Current Time" OnClick="Button1_Click" />

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</asp:Panel>

Run the project

AjaxControl Toolkit AnimationExtender Control in ASP.Net

When you click Current time button then its color will be change.

AjaxControl Toolkit AnimationExtender Control in ASP.Net

After few second current times is display and button color change into previous color.

AjaxControl Toolkit AnimationExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick