ajax: using update animation without server control

i recently wanted to add some more visual cues to my application when a search was happening.  i already had the "searching, please wait..." note on there, but since my app was an 'in your face' application experience, i thought i could make that message more in your face as well.  so i added a fade effect to the entire map control as seen in this image:

as you can see when the search button is clicked, the entire virtual earth map control fades out until the results come back.  so my only problem (as i wanted to use the microsoft ajax library) was that it wasn't a server control or wasn't an update panel.  so i had to use an animation extender, but also had to do it only on the client (as the virtual earth control is a client-only control right now as well).

here's what i did (thanks to some guidance from a colleague as well).  i basically added an element on my page that was a fake element -- a div with no visibility...think of it as an ajax placeholder:

   1:  <div id="FakeTarget" runat="server" style="display:none"></div>

then i added animation extenders on there (one for fade in and one for fade out) and attached them to the fake target element as the extenders require a target element to attach to at runtime.

   1:  <ajax:AnimationExtender ID="mapfadeout" runat="server" Enabled="true" TargetControlID="FakeTarget">

   2:      <Animations>

   3:          <OnClick>

   4:              <Sequence>

   5:                  <OpacityAction AnimationTarget="map" Opacity=".4" />

   6:              </Sequence>

   7:          </OnClick>

   8:      </Animations>

   9:  </ajax:AnimationExtender>

  10:  <ajax:AnimationExtender ID="mapfadein" runat="server" Enabled="true" TargetControlID="FakeTarget">

  11:      <Animations>

  12:          <OnClick>

  13:              <Sequence>

  14:                  <OpacityAction AnimationTarget="map" Opacity="1" />

  15:              </Sequence>

  16:          </OnClick>

  17:      </Animations>

  18:  </ajax:AnimationExtender>

my next step was in my javascript function to instantiate these behaviors when i wanted...so in my client script i got a handle to the extenders and manually called their play function...and did the same in my callback function getting the net effect you see in the above image...here's the script:

   1:  var onclick = $find("mapfadeout").get_OnClickBehavior().get_animation();

   2:  onclick.set_target("map");

   3:  onclick.play();

you may think that it is lame to have two extenders, but if you look at how i would have accomplished this using the updatepanelanimationextender if i was able to use a server control, then it is still similar -- that extender has OnUpdating/OnUpdated event handlers...so same thing, just in one extender...net effect is the same.

i hope this helps guide anyone doing something similar!