I have 2 animation Extender that go in order, animationextender1 then animationextender2, I have a NEXT and BACK button on the second one, the thing is when I click BACK it works, but then if I click NEXT again, nothing happens, do I have to run some code in the back when I click BACK to get the NEXT to work again? It is possible to provide a simple animation effect such as moving an ASP Control to a new place, resizing it, modifying its color, or making it fade in or fade out.
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).
Introduction In Today’s tutorial we will go over the Animation Extender and how to select one animation of a list of animations. You will want to set the Panel ID to something you will remember. Also since we are adding styling reference the style sheet as well for example Css Class=”panelclass” 4.
We are using Visual Studio 2010, to perform these tutorials, if you do not have a copy of Visual Studio 2010, you can download it at The associated CSS class for the panel defines a background color and width. You can drag and drop this one as well from the AJAX Control Toolkit. Here is where we needed to remember that ID for the Panel we set up earlier, since were are going to reference it in the properties section. The following markup defines three subanimations: Resizing the width, resizing the height, and fading out.
alternatively; Microsoft has been nice enough to provide a free download of Visual Web Developer. You can use your own settings or you may use ours when you downloaded the source file. Set the Target Control Id to the panel you added earlier. After you have set the Target control, you can go to the properties section and set the parameters for the animation.
Before we begin, we suggest you download the source code, to follow along step by step. Before we can begin, we must add a Tool Script Manager you can drag and drop this from the AJAX Control Toolkit. You can set the Duration of the Animation, such as 1.5 or 10 seconds, how you want the animation to execute, for example on mouse over or on page load. To see how we set it you can always download the source code file.
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: my next step was in my javascript function to instantiate these behaviors when i wanted..in my client script i got a handle to the extenders and manually called their play function..did the same in my callback function getting the net effect you see in the above image...here's the script: 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 On Updating/On Updated event handlers..same thing, just in one extender..effect is the same.