I found myself struggling on how to use the ASP.NET AJAX Control Toolkit Animation Extender.  I wanted to use a simple example on a website that was basically the example they give on the Toolkit website.  I wanted the user to click a link and it would “fly-out” a window to show more information.  I tried to follow the example online however, I found myself missing an important part to it…the CSS aspect of it.  I wanted to write a quick example of how to do this without you trying to read Microsoft’s source code and example online.

Step 1:  The following styles will need to be used in order for this to work.  I would recommend placing the classes into a stylesheet.

.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; 
}

Step 2:  Place the DIV on your web page and the link button that we will use for our target control ID to activate the animation.  You will notice the OnClientClick=”return false;” this is so the link button does not post back.

<asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return false;" />

<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 3:  Add the AnimationExtender to the web page

<ajaxToolKit: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=".5"/>
                        </Parallel>
                        <Parallel AnimationTarget="moveMe" Duration=".5">
                             <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                            <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                        </Parallel>
                    </Sequence>
                </OnClick>
            </Animations>
       
        </ajaxToolKit:AnimationExtender>
       
        <ajaxToolKit: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.05" 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>
       
  </ajaxToolKit:AnimationExtender>

You'll notice in step 3 there are 2 animation extenders.  One is to show and move the DIV and the second is to close, move and hide the DIV.  The StyleAction tag in the second extender are very important because this is what sets the DIV back to the default view as if you just loaded the web page again.

I hope this has made it easier to use the animation extender.  The documentation online as to what the tags mean are very useful at:

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/AnimationReference.aspx

If anyone finds faults or problems in the code feel free to comment.