AnimationExtender allows you to utilize built-in animation framework with existing web pages in a more declarative way. This allow you to add a broad set of fancy animation effect to your website . Using AnimationExtender , The animation plays when certain event occurs on the target control , such as OnLoad , OnClick , OnMouseOver, and OnMouseOut. You can implement and control a variety of animated action using the built-in framework , such as resizing , fading , and moving a control.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Animation.aspx.cs" Inherits="Animation" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID ="Button1">
<Animations >
<OnMouseOver>
<Color Duration="2" StartValue="#ffffff" EndValue="#000000" Property="style" PropertyKey="background-color" />
</OnMouseOver>
<OnMouseOut>
<Color Duration="2" StartValue="#000000" EndValue="#ffffff" Property="style" PropertyKey="background-color" />
</OnMouseOut>
</Animations>
</asp:AnimationExtender>
</div>
</form>
</body>
</html>
OutPut of the code are:
Properties of AnimationExtender Control :
TargetControlID : Set the ID of the control whose event are fired to create animation effect.
OnLoad : Set an event to play the animation when the page is loaded.
OnMouseOver : Set an Event to play when the mouse moves over the target control.
OnMouseOut : Set an event to play when the mouse moves away from the target control.
OnHoverOver : Set an event to play when the mouse moves over the target control but it stop the OnHoverOut animation before it plays.
OnHoverOut : Set an event to play when the mouse moves away from the target control but it stop the OnHoverOver animation before it plays.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Animation.aspx.cs" Inherits="Animation" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID ="Button1">
<Animations >
<OnMouseOver>
<Color Duration="2" StartValue="#ffffff" EndValue="#000000" Property="style" PropertyKey="background-color" />
</OnMouseOver>
<OnMouseOut>
<Color Duration="2" StartValue="#000000" EndValue="#ffffff" Property="style" PropertyKey="background-color" />
</OnMouseOut>
</Animations>
</asp:AnimationExtender>
</div>
</form>
</body>
</html>
OutPut of the code are:
Properties of AnimationExtender Control :
TargetControlID : Set the ID of the control whose event are fired to create animation effect.
OnLoad : Set an event to play the animation when the page is loaded.
OnMouseOver : Set an Event to play when the mouse moves over the target control.
OnMouseOut : Set an event to play when the mouse moves away from the target control.
OnHoverOver : Set an event to play when the mouse moves over the target control but it stop the OnHoverOut animation before it plays.
OnHoverOut : Set an event to play when the mouse moves away from the target control but it stop the OnHoverOver animation before it plays.