Here I am going to explain ,How can you use Ajax Animation Extender in asp.net. Here i use the Animation Extender to fade in and fade out of the content in a certain duration. To use the Ajax control in asp.net ,first you have to add Ajax Tool Kit in your application.
Create a webpage , Copy and paste the below code .
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
height: 211px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:LinkButton ID="lnkbtn" OnClientClick="return false;" runat="server">Start Animation Here</asp:LinkButton>
<br />
<asp:Panel ID="Message" runat="server" Width="436px" Height="254px">
<h2 style="color:#FFF; height: 175px; width: 426px;">WelCome To saroj DotNet !
<table class="style1">
<tr>
<td>
</td>
<td>
<asp:Image ID="Image4" runat="server" Height="71px" ImageUrl="~/dotnetlogo.png"
Width="289px" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
WelCome to Sarojasp.Blogspot.Com</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Image ID="Image5" runat="server" Height="43px" ImageUrl="~/dotnet5.png"
Width="324px" />
</td>
<td>
</td>
</tr>
</table>
</h2>
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="lnkbtn">
<Animations>
<OnClick >
<Sequence>
<Color
AnimationTarget="Message"
Duration="4"
Property="style"
PropertyKey="backgroundColor"
StartValue="#CE0E3F"
EndValue="#FFFFFF" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
</div>
</form>
</body>
</html>
See Demo Here :
Create a webpage , Copy and paste the below code .
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
height: 211px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:LinkButton ID="lnkbtn" OnClientClick="return false;" runat="server">Start Animation Here</asp:LinkButton>
<br />
<asp:Panel ID="Message" runat="server" Width="436px" Height="254px">
<h2 style="color:#FFF; height: 175px; width: 426px;">WelCome To saroj DotNet !
<table class="style1">
<tr>
<td>
</td>
<td>
<asp:Image ID="Image4" runat="server" Height="71px" ImageUrl="~/dotnetlogo.png"
Width="289px" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
WelCome to Sarojasp.Blogspot.Com</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Image ID="Image5" runat="server" Height="43px" ImageUrl="~/dotnet5.png"
Width="324px" />
</td>
<td>
</td>
</tr>
</table>
</h2>
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="lnkbtn">
<Animations>
<OnClick >
<Sequence>
<Color
AnimationTarget="Message"
Duration="4"
Property="style"
PropertyKey="backgroundColor"
StartValue="#CE0E3F"
EndValue="#FFFFFF" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
</div>
</form>
</body>
</html>
See Demo Here :
No comments:
Post a Comment