How to use Animation Extender in Asp.net Ajax:
The AnimationExtender is a simple extender that allows you to
utilize the powerful animation framework with existing pages in an easy, declarative fashion. It
plays animations whenever a specific event like OnLoad,
OnClick, OnMouseOver, or
OnMouseOut is raised by the target control.
To implement this concept you need to follow the below steps :
Step1:
Create a new Asp.net website in Visual Studio and write the following Source
code in the design part of the Default.aspx page.
AnimationExtender.aspx (Source Code) :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.flyOutDiv
{
display: none;
position: absolute;
width: 400px;
z-index: 3;
font-size: 14px;
border: solid 1px #CCCCCC;
background-color:
#FFFFFF;
padding: 5px;
}
.flyOutDivCloseX
{
background-color:
#666666;
color: #FFFFFF;
text-align: center;
font-weight: bold;
text-decoration:
none;
border: outset thin #FFFFFF;
padding: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
`<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return false;" />
<div id="moveMe" class="flyOutDiv">
<div style="float:right;">
<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server"
Text="X" CssClass="flyOutDivCloseX" />
</div>
<p>
Microsoft Silverlight is an application
framework for writing and running rich Internet applications, with features and
purposes similar to those of Adobe
Flash.current versions support multimedia, graphics and animation, and give
developers
support for CLI languages and
development tools. Silverlight is also one of the two application development
platforms for Windows Phone.
</p>
</div>
</div>
<div>
<asp:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="lnkBtnColHelp">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false"></EnableAction>
<StyleAction AnimationTarget="moveMe"
Attribute="display"
Value="block"/>
<Parallel AnimationTarget="moveMe"
Duration=".5"
Fps="30">
<Move Horizontal="200"
Vertical="50"></Move>
<FadeIn Duration=".5"/>
</Parallel>
<Parallel AnimationTarget="moveMe"
Duration=".5">
<Color PropertyKey="color"
StartValue="#666666"
EndValue="#FF0000"
/>
<Color PropertyKey="borderColor"
StartValue="#666666"
EndValue="#FF0000"
/>
</Parallel>
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</div>
<div>
<asp:AnimationExtender ID="AnimationExtender2" runat="server"
TargetControlID="lnkBtnCloseColHelp">
<Animations>
<OnClick>
<Sequence AnimationTarget="moveMe">
<Parallel AnimationTarget="moveMe"
Duration=".7"
Fps="20">
<Move Horizontal="200"
Vertical="50"></Move>
<Scale ScaleFactor="0.05"
FontUnit="px"
/>
<Color PropertyKey="color"
StartValue="#FF0000"
EndValue="#666666"
/>
<Color PropertyKey="borderColor"
StartValue="#FF0000"
EndValue="#666666"
/>
<FadeOut />
</Parallel>
<StyleAction Attribute="display"
Value="none"/>
<StyleAction Attribute="height"
Value=""/>
<StyleAction Attribute="width"
Value="200px"/>
<StyleAction Attribute="fontSize"
Value="10px"/>
<EnableAction AnimationTarget="lnkBtnColHelp"
Enabled="true"
/>
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</div>
</form>
</body>
</html>
Step4:
Now build the Solution and Debug it for the output.
AdRotator (Output Page) :
Recommend this on Google
ReplyDelete