Using an Animation to Create a Fade Effect

You can create a nice fade effect by changing the opacity of an element. Let’s start with the programmatic approach. In the pageLoad() function, we create a new Sys.UI.FadeAnimation object:

var ani = new Sys.UI.FadeAnimation();

Then we set the target element: a label element (<span>) we created on the page:


The default behavior for the fading animation is that the element fades in. However, the Sys.UI.FadeEffect enumeration defines two options, FadeIn and FadeOut, which you can change by calling the set_effect() method:


We then define how long the animation should run. The default value is one second; the following code triples that:


Finally, we run the animation:;

This is all illustrated in Example 7-1.

Example 7-1. Using a fading animation

FadeAnimation.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head runat="server"> <title>Atlas</title> <script language="JavaScript" type="text/javascript"> function pageLoad() { var ani = new Sys.UI.FadeAnimation(); ani.set_target($("Label1").control); ani.set_effect(Sys.UI.FadeEffect.FadeOut); ani.set_duration(3);; } </script> </head> <body> <form id="form1" runat="server"> <atlas:ScriptManager runat="server" ID="ScriptManager1"> <Scripts> ...

Get Programming Atlas now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.