Using the ASP.NET Ajax Fade Animation

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.