Skip to Main Content
Programming Atlas
book

Programming Atlas

by Christian Wenz
September 2006
Intermediate to advanced content levelIntermediate to advanced
408 pages
10h 38m
English
O'Reilly Media, Inc.
Content preview from Programming Atlas

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> ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Go Systems Programming

Go Systems Programming

Mihalis Tsoukalos

Publisher Resources

ISBN: 0596526725Supplemental ContentCatalog PageErrata