Animation:与Flash媲美的JavaScript动画

 Animation扩展器控件可以应用到页面中的任何元素上，为其添加能够与Flash相媲美的动画功能，这些动画均建立于ASP.NET AJAX之上，并以组件的方式提供给开发者。
示例运行代码：

图(1)

图(2)

图(3)

AnimationDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="AnimationDemo.aspx.cs" Inherits="Chapter09_AnimationDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Animation Demo </ title >
     < link  href ="stylesheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        .itemContainer
        {...}{
            border:1px solid black;
            margin:2px;
            padding:2px;
            width:335px;
            height:0px;
            overflow:hidden;
            display:none;
        }
     </ style >
</ head >
< body >
     < form  id ="AnimationForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < asp:LinkButton  ID ="lbtnShow"  Text ="Show Items"  OnClientClick ="return false"  runat ="server"   ></ asp:LinkButton >
         < div  id ="itemContainer"  class ="itemContainer" >
            ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX 
            ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX 
            ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX 
            ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX ASP.NET AJAX 
            ASP.NET AJAX ASP.NET AJAX 
         </ div >
         < ajaxToolkit:AnimationExtender  ID ="ae"  runat ="server"  TargetControlID ="lbtnShow" >
             < Animations >
                 < OnClick >
                     < Sequence >
                         < EnableAction  Enabled ="false"   />
                         < StyleAction  AnimationTarget ="itemContainer"  Attribute ="display"  Value ="block" /> ...
                        <Parallel Duration="0.3">
                            <Resize AnimationTarget="itemContainer" Height="100" Unit="px" />
                            <FadeIn AnimationTarget="itemContainer" />
                        </Parallel>
                        <Pulse AnimationTarget="itemContainer" Duration="0.1" />
                        <EnableAction Enabled="true" />
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
        <!--
            TargetControlID：该扩展器目标控件的ID。该扩展器中定义的动画将应用到该控件之上
            <Animations>：该标签内将定义目标控件中用来触发执行动画的事件，即本列表中下面的6种事件
            <OnLoad>：该标签内将定义在页面刚刚加载完成时目标控件将执行的动画
            <OnClick>：该标签内将定义在用户点击目标控件时将执行的动画
            <OnMouseOver>：该标签内将定义在用户鼠标移入目标控件区域内时将执行的动画
            <OnMouseOut>：该标签内将定义在用户鼠标移出目标控件区域内时将执行的动画
            <OnHoverOver>：与<OnMouseOver>类似，不过其中定义的动画将打断可能正在执行的定义于<OnHoverOut>中的动画
            <OnHoverOut>：与<OnmouseOut>类似，不过其中定义的动画将打断可能正在执行的定义于<OnMouseOver>中的动画
        -->
    </form>
</body>
</html>