Using the ASP.NET Ajax Fade Animation

15 November 2006
So I think I mentioned before that I've been playing around with the new Ajax bits from Microsoft. Currently we're up to beta 2. Get it here.

Want to know how to use the fade animation? It's pretty easy. Here's the javascript:

//Instantiate a control with the div to animate
//'faderDiv' is the id of the control to fade
var target = new Sys.UI.Control($get('faderDiv'));

var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
//The control-wrapped element to fade fadeAnimation.set_target(target); //The duration that the animation will last, in seconds fadeAnimation.set_duration(1); //The frames-per-second for the animation fadeAnimation.set_fps(25); //Fade in or fade out? Set it here fadeAnimation.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut); //Execute the animation fadeAnimation.play();


The javascript actually pretty straightforward, as you can see.

This functionality is not in beta 2, but the somewhat confusing value-add ctp. You'll need to download that as well as the beta to do this.

You reference the javascript resources in the ScriptManager on the page. Like this:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference
      Assembly="Microsoft.Web.Preview"
      Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
    <asp:ScriptReference
      Assembly="Microsoft.Web.Preview"
      Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" />
  </Scripts>
</asp:ScriptManager>


Other stuff to keep in mind. First, don't forget to modify your web.config. You'll definitely need the following in your handlers section (If you get 'Sys is not defined', this is probably why).
<add verb="GET"
     path="ScriptResource.axd"
     type="Microsoft.Web.Handlers.ScriptResourceHandler"
     validate="false"/>

Of course, check the documentation and samples on the ajax.asp.net site for more info.
Comments:2
Comments
  1. Tobiason Sun, 03 Dec 2006 05:26:54 GMT
    I've been trying to get the FadeAnimation to work in beta 2 but has not succeded yet. And that includes the code you are showing above. Did you get this code to work in beta 2? If so, what browser were you using at the time?
  2. Ericon Tue, 05 Dec 2006 12:24:43 GMT
    I was using beta 2. And I tested it in both IE 6 and Firefox 2. What about you?
Name:
Blog or Website:
 
Email (will not be displayed):
 
Comment :