Moving a panel using ajax animation extender in asp.net

I was looking for this over the net but couldn’t find a simple explanation to implement the move animation. Just follow these simple steps and you would be good to go.

Step 1: Create a panel which you want to move with the animation extender

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

Click on the Panel to move it

</asp:Panel>

Step 2: Assign a CSS class to this panel. Make sure you assign the coordinates for this panel as animation extender uses these coordinates to move the panel.

.movingPanel

{

position : absolute;

height : 200px;

width: 250px;

top: 166px;

left: 500px;

border-width: 1px;

border-color:Black;

border-style:double;

}

Step 3: Add the animation extender to the page.

<asp:AnimationExtender ID="AnimationExtender1" runat="server"TargetControlID ="Panel1" >

<Animations>

<OnClick>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal ="100" unit ="px"/>

</OnClick>

</Animations>

</asp:AnimationExtender>

Duration: Duration of Animation

FPS: Frames per second
Vertical: Vertical length to cover
Horizontal: Horizontal length to cover
Unit: Unit to define Vertical and Horizontal lengths
Build the solution and click on the panel to move it. Let me know if you face any issues.