ajax Animation extender example in asp.net or how to use ajax Animation extender in asp.net.

How to use ajax Animation Extender Control in asp.net or ajax Animation Extender Control example in asp.net.

Introduction:

In this example Iam Going to Explain how to use Animation Extender Control in asp.net.

If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example HTML  Tab Container example.

 

Demo:

animation extender


What is Animation Extender?

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.

When Ever You Want to Use Ajax Controls in your website First you need Add AjaxControlToolkit reference to your application.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" .

And also you have to add Tool kit Scriptmanager Control under <Form> tag:.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager> 

Your Aspx page Should be like this : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .movingPanel
        {
            position: fixed;
            height: 200px;
            width: 150px;
            top: 126px;
            left: 200px;
            border-width: 1px;
            border-color: Black;
            border-style: double;
        }       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:Panel ID="pnAnimation" runat="server" CssClass="movingPanel">
            <b>Asp.net learning Site is Related to Dotnet</b>
        </asp:Panel>
        <br />
        <asp:AnimationExtender ID="AnimationExtender1" runat="server"                                 TargetControlID="pnAnimation">
            <Animations>
       <OnClick>

        <Sequence>
           <%-- Disable the button --%>
            <EnableAction Enabled="false" />
           <%-- Show the flyout --%>
            <Parallel AnimationTarget="pnAnimation" Duration=".3" Fps="25">
                <Move Horizontal="150" Vertical="-50" />
                <Resize Height="260" Width="280" />
                <Color AnimationTarget="pnAnimation" PropertyKey="backgroundColor"
                        StartValue="#FF0000" EndValue="#FF00FF"  />
            </Parallel>
            </Sequence>
           </OnClick>
            </Animations>
        </asp:AnimationExtender>
    </div>
    </form>
</body>
</html>

No comments: