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
//The duration that the animation will last, in seconds                
//The frames-per-second for the animation
//Fade in or fade out? Set it here
//Execute the animation; 

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">
      Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
      Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" />

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"

Of course, check the documentation and samples on the site for more info.


Tobias 2006-12-03 05:26:54

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?

Eric 2006-12-05 12:24:43

I was using beta 2. And I tested it in both IE 6 and Firefox 2. What about you?