Friday, May 16, 2008

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"
                    <StyleAction AnimationTarget="info"
                    Attribute="display" Value="block"/>
                    <FadeIn AnimationTarget="info" Duration=".5"
                    Fps="20" />
                    <FadeOut AnimationTarget="info" Duration=".5"
                    Fps="20" />
                    <StyleAction AnimationTarget="info"
                    Attribute="display" Value="none"/>

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;">

No comments: