Using MS Ajax Animations From the Client-Side
We will talk about how to use the MS-Ajax Animation Framework without any server-side code.
The sample completely illustrates how to instantiate and use the Animation Controls by including the proper script references.
1) Include the following scripts in your HTML Page
MicrosoftAjax.js ( download from Here )
Timer.js ( downlod from Here )
BaseScripts.js
Common.js
Animations.js
AnimationBehavior.js
Actual HTML
<script src="ClientScripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="ClientScripts/Timer.js" type="text/javascript"></script> <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script> <script src="ClientScripts/Animations.js" type="text/javascript"></script> <script src="ClientScripts/Common.js" type="text/javascript"></script> <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>
2) Call the "Initialize()" function to initialize the Scripts in the HTML Page.
<script type="text/javascript"> <!-- Sys.Application.initialize(); --> </script>
3) Create your animation using the $create Method or use the Static methods of the Animation Library to create animations.
Sample HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>Animation Repro</title> </head> <body> <script src="ClientScripts/MicrosoftAjax.debug.js" type="text/javascript"></script> <script src="ClientScripts/Timer.js" type="text/javascript"></script> <script src="ClientScripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script> <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script> <script src="ClientScripts/Animations.js" type="text/javascript"></script> <script src="ClientScripts/Common.js" type="text/javascript"></script> <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script> <input type="button" onclick="Expand(event)" value="Expand" style="display: block" id="btnExpand" /> <input type="button" onclick="Contract(event)" value="Contract" style="display: none" id="btnContract" /> <div id="popup" style="display: block; cursor: hand; background-color: #ffcc00; height: 100px; width: 200px;" title="click to hide"> <table style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> TEST </td> </tr> </table> </div> <script type="text/javascript"> <!-- Sys.Application.initialize(); function Contract(eventArgument) { //Hack for FireFox if( eventArgument == null ) { eventArgument = event; } $get("btnExpand").style.display = "block"; $get("btnContract").style.display = "none"; //ResizeAnimation.play(target, duration, fps, width, height, unit); AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 200 , 100 , "px" ); } function Expand(eventArgument) { //Hack for FireFox if( eventArgument == null ) { eventArgument = event; } $get("btnExpand").style.display = "none"; $get("btnContract").style.display = "block"; //ResizeAnimation.play(target, duration, fps, width, height, unit); AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 400 , 400 , "px" ); } --> </script> </body> </html>
Check out the Sample Attached to get a feel of how this works.
Any questions/comments are welcome