Ajax - FadeIn and FadeOut Animation

With Microsoft AjaxToolkit you can do a lot oh things but the most complex (for me) is to apply an animation to an object. However, with a small amount of lines, you can create simple animations and effects for a WebForm.

In this example, we wanna show a customized tooltip when the mouse is over a button and then that it disappears when the mouse is out. We use fadeIn and fadeOut animations, 0.5 seconds long and with a framerate of 20fps:


<cc1:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="ImageButton1">
     <Animations>
          <OnMouseOver>
               <sequence>
                    <StyleAction AnimationTarget="info"
                    Attribute="display" Value="block"/>
                    <FadeIn AnimationTarget="info" Duration=".5"
                    Fps="20" />
               </sequence>
          </OnMouseOver>
          <OnMouseOut>
               <sequence>
                    <FadeOut AnimationTarget="info" Duration=".5"
                    Fps="20" />
                    <StyleAction AnimationTarget="info"
                    Attribute="display" Value="none"/>
               </sequence>
          </OnMouseOut>
     </Animations>
</cc1:AnimationExtender>


info is a "div" that contains our tooltip. Must be written in this way:

<div id="info" style="display: none; z-index: 2; opacity: 0;">