第十六篇: Ajax Control Toolkit 控件包--5.AnimationExtender

实例解释1：

   <ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
            <Animations>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false" />                                    <%--禁用目标控件btnInfo--%>
                        <ScriptAction Script="Cover($get('btnInfo'), $get('flyout'));" />    <%--调用函数Cover对flyout层属性赋值--%>
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>  <%--以块的形式显示flyout层--%>

                        <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">    <%--并发运行flyout层,持续0.3秒,25帧--%>
                            <Move Horizontal="150" Vertical="-50" />                  <%--水平移动150,垂直移动-50--%>
                            <Resize Width="260" Height="280" />                       <%--改变大小,宽260,高280--%>
                            <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />    <%--背景颜色 #AAAAAA到#FFFFFF渐变--%>
                        </Parallel>
                        
                       
                        <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />  <%--调用函数Cover对info层属性赋值--%>
                        <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>   <%--以块的形式显示info层--%>
                        <FadeIn AnimationTarget="info" Duration=".2"/>                            <%--淡入info层,持续时间0.2秒--%>
                        <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>  <%--隐藏flyout层显示--%>
                        
                        
                        <Parallel AnimationTarget="info" Duration=".5">                           <%--并发运行info层,持续0.5秒--%>
                            <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />     <%--文字颜色渐变--%>
                            <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />     <%--边框颜色渐变--%>
                        </Parallel>
                        <Parallel AnimationTarget="info" Duration=".5">                             <%--并发运行info层,持续0.5秒--%>
                            <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />  <%-- 文字颜色渐变--%>
                            <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />     <%--边框颜色渐变--%>    
                            <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />        <%--淡入关闭按钮,最大透明度0.9--%> 
                        </Parallel>
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>

 

<script type="text/javascript">
        function Cover(bottom,top)
        {
            var location = Sys.UI.DomElement.getLocation(bottom);
            top.style.position = 'absolute';
            top.style.top=location.y+'px';
            top.style.left=location.x+'px';
            top.style.height=bottom.offsetHeight+'px';
            top.style.width=bottom.offsetWidth+'px';
           
        }
    </script>