O'Reilly logo

Programming Atlas by Christian Wenz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

ani.set_target($("Label1").control);

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:

ani.set_effect(Sys.UI.FadeEffect.FadeOut);

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

ani.set_duration(3);

Finally, we run the animation:

ani.play();

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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); ani.play(); } </script> </head> <body> <form id="form1" runat="server"> <atlas:ScriptManager runat="server" ID="ScriptManager1"> <Scripts> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required