Ajax animation extender

Question

I want a popup onclick that flies in animated. I'm using ajax and currently this is what I have:

<asp:ImageButton ID="ImageButton2" runat="server" 
                            ImageUrl="~/images/bttnViewMini.gif" />
                        <asp:Panel ID="Panel3" runat="server">
                         //stuff
                        </asp:Panel>
                        <ajaxToolkit:AnimationExtender ID="ae"
                        runat="server" TargetControlID="ImageButton2" >
                        <Animations>
                           <OnClick>
                                <FadeIn Duration=".5" Fps="20" />
                            </OnClick>
                        </Animations>
                        </ajaxToolkit:AnimationExtender>

That makes my button fade in.... How Do I make it fade the Panel3 in instead?

Answer 1

Thanks for all of the hundreds of answers I received. Nevertheless here's what i did:

<asp:ImageButton ID="ImageButton2" runat="server" 
                            ImageUrl="~/images/icon_info.gif"  />
                        <div id="moveMe" style="display:none">
                              <div style="float:right;">
                                <asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;" />
                              </div>
                            <br /><br />
                                 <table>
                                 <tr>
                                    <td>
                                         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                                            DataSourceID="None of your Buisness" GridLines ="None" ShowHeader =""  >
                                            <Columns>
                                                <asp:BoundField DataField="LongDescription" HeaderText="Noyb:" 
                                                    SortExpression="Noyb" />
                                            </Columns>
                                        </asp:GridView>
                                     </td>
                                </tr>
                                 </table>                         
                        </div>

                        <ajaxToolkit:AnimationExtender ID="ae"
                        runat="server" TargetControlID="ImageButton2" >
                        <Animations>
                           <OnClick>
                              <Sequence>
                                <EnableAction Enabled="false"></EnableAction> 
                                <StyleAction AnimationTarget="moveMe" Attribute="display" Value=""/>
                                <Parallel AnimationTarget="moveMe" Duration="1" Fps="30">
                                    <Move Horizontal="-350" Vertical="50"></Move>
                                    <FadeIn Duration=".5"/>
                                </Parallel> 
                                <Parallel AnimationTarget="moveMe" Duration=".5">
                                    <Color PropertyKey="color" StartValue="#666666" EndValue="#0000FF" />
                                    <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="ImageButton2" Enabled="true" />
                                </Sequence>
                            </OnClick> 
                        </Animations> 
                        </ajaxToolKit:AnimationExtender>

Answer 2

What you want to do is in your FadeIn tag add:

<FadeIn AnimationTarget="Panel3" Duration=".5" Fps="20" />