asp tricks : Ajax-Animation Extender

Step : -1  Take a script Manager
--------

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

Step :-2  Style sheet to in use
--------

<style type="text/css">
        .flyOutDiv
        {
            display: none;
            position: absolute;
            width: 400px;
            z-index: 3;
            opacity: 0;
            filter: (progid:DXImageTransform.Microsoft.Alpha(opacity=0));
            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>

Step :-3  Controls to move

--------

 <div id="moveMe" class="flyOutDiv">

            <div style="float: right;">

                <asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;"

                    CssClass="flyOutDivCloseX" />

            </div>

            <br />

            <p>

                some content here for whatever text

            </p>

        </div>

Step :-4  Controls to move

--------

on button click Click button happens:

------------------------------

<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="350" Vertical="50"></Move>

                            <FadeIn Duration=".10"/>

                        </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>

on close button happens : 

----------------

        <asp:AnimationExtender ID="AnimationExtender2" runat="server"             TargetControlID="lnkBtnCloseColHelp">

            <Animations>

                <OnClick>

                    <Sequence AnimationTarget="moveMe">

                        <Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">

                            <Move Horizontal="350" Vertical="50"></Move>

                            <Scale ScaleFactor="0.5" 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="400px"/>

                       <StyleAction Attribute="fontSize" Value="14px"/>

                        <EnableAction AnimationTarget="lnkBtnColHelp" Enabled="true" />

                    </Sequence>

                </OnClick>

            </Animations>

        </asp:AnimationExtender>

Reply about your satisfaction

Web Designer Vipul Soni