使用客户端代码执行动画 (C#)
ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。
概述
ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。
步骤
首先，在页面中包括 ScriptManager ;然后加载 ASP.NET AJAX 库，从而可以使用 Control Toolkit：
<asp:ScriptManager ID="asm" runat="server" />
动画将应用于如下所示的文本面板：
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
在面板的关联 CSS 类中，定义漂亮的背景色，并为面板设置固定宽度：
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
然后，将 添加到 AnimationExtender 页面，并提供 ID、 TargetControlID 属性和强制 runat="server"：
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
在 节点中 <Animations> ，使用 <OnClick> 在用户单击面板后运行动画。 添加要并行执行的两个动画：
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
为了便于演示，此动画 (，使用 Control Toolkit) 创建的任何其他动画在页面运行后使用 JavaScript 代码执行。 首先，我们需要访问 控件 AnimationExtender 。 ASP.NET AJAX 库为此任务提供 $find() 函数：
var ae = $find("ae");
控件 AnimationExtender 公开一个丰富的 API，包括名称与 XML 标记中使用的事件处理程序相同的方法： OnClick()、 OnLoad()等。 例如， 对 方法的OnClick()调用在 控件的 AnimationExtender 元素中<OnClick>执行动画：
ae.OnClick();
下面是完整的客户端 JavaScript 代码，该代码模拟页面完全加载后在面板上的单击操作。请注意 pageLoad() ，在加载页面和所有包含的 JavaScript 库后，ASP.NET AJAX 将调用该函数名称。
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
动画立即运行，无需单击鼠标 (单击即可查看全尺寸图像)
