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!
tags: ajax, asp.net, asp.net ajax, ajaxcontroltookit, ajax control toolkit, ajaxtoolkit, updatepanel, animation, microsoft asp.net ajax, microsoft ajax, timheuer