Ajax - Animazione FadeIn e FadeOut

Con l'AjaxToolkit di Microsoft si possono fare tante cose, quella più complicata (a mio avviso) è applicare ad un oggetto un'animazione. Con poche righe, però, si possono creare semplici animazioni ed effetti da applicare ad una nostra WebForm.

Ad esempio, supponiamo di voler fare in modo che, spostando il mouse sopra un bottone si visualizzi un "tooltip" personalizzato e che sparisca spostandolo via dal bottone. Questi sono i tag e le proprietà per applicare al tooltip i classici effetti di fadeIn e fadeOut, della durata di 0.5 secondi ad un framerate di 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 è un div che contiente il nostro tooltip. Deve essere costruito in questo modo:

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