MS AJAX Animation How-To: Toggle Element Visibility

I’ve been experimenting with the Microsoft AJAX Control Toolkit quite a bit lately, and I’m fascinated! You can build some pretty sick effects with the arsenal of actions and sequences.

The page that shows uses of the Animation control, Using Animations, demonstrates how to fade out a button with the help of Resize, FadeOut, and Hide actions. I got curious, How do you fade it back in in response to, say, a button click, if there’s no Show action?

After a bit of monkeying around, I put together a sample page with two buttons which toggle visibility of an arbitrary element. I added EnableAction before and after each sequence to disable the action button, but you can take it further and tie everything to a single toggle control, or whatever else floats your boat. The source code is available online.

Something tells me I’ll be posting more on the AJAX Control Toolkit in the near future. ;) My biggest pet peeve for now is that you can’t use a server-side control ID in the AnimationTarget property:

The AnimationTarget should not be set to the ASP.NET control’s ID property because it will use document.getElementByID to locate the control (so instead use the ASP.NET control’s ClientID property)

I don’t know what if I’m missing something, but feeding <%= Foo.ClientID %> to AnimationTarget produces an error: “The ’Animations’ property of ’ajaxToolkit:AnimationExtender’ does not allow child objects.” I noticed that samples have references to controls hardcoded as ctl00_SampleContent_xxxx which is a no-no.

Yeah, the inability to use Foo.ClientID is pretty annoying. I ended up using ClientScript.RegisterClientScriptBlock to add a function to the page, and then using a bunch of if...then and Foo.ClientID within the function to make it work without hardcoding the IDs. It's still not very elegant though.

I've been struggling with this too. Mind posting some sample code for the ClientScript.RegisterClientScriptBlock code used to get the client ID of a control?

Hey there,
Try doing this in the Pahe_Load

AnimationExtender1.Animations = AnimationExtender1.Animations.Replace("Panel1", Panel1.ClientID);
:)

I had the same problem when trying to get a reference to an Animation definition while in a masterpage. I defined a BehaviorID in the animationextender and then referenced it from javascript as $find("IdUsedInBehaviorIDField") to avoid the clientID reference.