Tips: How to create an animation using the MS AjaxToolkit's JavaScript

First of all, install the MS Ajax Extension 1.0, then add the following ScriptManager into your aspx page.

<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="false">

<Scripts>

<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />

<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />

<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />


</Scripts>

</asp:ScriptManager>

Add the following JavaScript codes into your aspx page.

<script type="text/javascript">

//Get a handle to the animation Target. The target can be anything like a 'div', 'table', etc

var target = $get("animationTarget");

//Create an instance of the FadeAnimation .

var fadeAnimation = new AjaxControlToolkit.Animation.FadeInAnimation();



//Set the Duration

fadeAnimation.set_duration( 1.0 );

//Set the Animation Target as a Sys.UI.Control object

fadeAnimation.set_target( target );

//Set the Maximum Opacity Value

fadeAnimation.setValue( 50 );

//Play the Animation

fadeAnimation.play();

</script>