Ajax animation demo using animation extender in asp.net part-1

Description:-

In this article we will Create animation demo using Ajax Control in webpage. To create animation extender register Ajax Control toolkit in your webpage and use Control what you want to use in your webpage. Here I have use panel control to display label control and use animation extender to display animation in my webpage. Animation Extender has many properties to create animation any webpage. Here I have created sample animation extender to create animation using Ajaxcontrol.

OnmouseOver Property to create when we mouse over in panel then it will create animation on panel what we have to do in animation extender. Here I the sample code what I have use in the animation extender.

Default.aspx:-

<div>
  <ajaxtoolkit:ToolkitScriptManager ID="Sc1" runat="server"></ajaxtoolkit:ToolkitScriptManager>
  <asp:Panel ID="AnimationPnl" runat="server" BackColor="#FCF4BF" Height="250px" Width="400px" BorderWidth="1">
    <asp:Label ID="lblText" runat="server" Text="PAY ATTENTION TO THIS PANEL TO SEE ANIMATIONS EFFECTS!!!" Font-Bold="True" ForeColor="#303174"> </asp:Label>
  </asp:Panel>
  <br /><br />
  <asp:LinkButton ID="lnkClick" runat="server" Text="Get Mouse on Me!!"></asp:LinkButton>
  <ajaxtoolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkClick">
    <Animations>
      <OnMouseOver>     
        <Resize AnimationTarget="AnimationPnl"  Width="200" Height="200" Unit="px" />  
      </OnMouseOver>  
    </Animations>
  </ajaxtoolkit:AnimationExtender>
</div>

Author : Umesh Patel

Related Posts