In this article we will see how we can use the Ajax control toolkit animation extender control with examples.
Animation is just the extender control which will add animation to the page. Animation can be played through a number of events attached to it like OnMouseOver, OnMouseOut, OnClick and OnLoad raised by the target control.
You can learn more in my previous parts here:
There are a number of useful animation effects like fading, resizing, movement and much more.
Initial Code for implementation of animation.
Output
Now let’s discuss its properties
Properties OnLoad
It can call animation as soon as the page load event fires.
Inside the Animations section we have declared OnLoad Server Property to initialize it on page load.
As you can see in the code we have used Sequence tag; also where we have declared multiple animation effects firstly it take three seconds and then it changes its opacity to 0.5 percent.
Check it out in action, OnClick
The animation starts playing on button, image or any clickable thing.
Code first resizes the picture and then fades in animation after a two second duration.
Output OnMouseOver
Animation is played when mouse moves over the target control.
See this in action,
OnMouseOut
Animation is played when mouse moves out of the target control.
Output OnHoverOver
Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays
OnHoverOut
Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays
Node Js and Angular CheatSheet