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> ...Get Programming Atlas now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
