|M| 晕死了 那什么我做Aniamtion控件就没有办法做到像软件的网站一样的效果呢 大家看看

这是微软网站的，效果在 快速链接
http://www.microsoft.com/library/toolbar/3.0/sitemap/zh-cn.mspx
他的效果很好以下是我照着AjaxControlToolkit做的
但鼠标快整Over Out 的时候DIV就会让整个网站很乱而微软的再快也不会出乱
大家看看怎么办谢谢
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Animation_Test" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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示例</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />        <script type="text/javascript" language="javascript">
            // Move an element directly on top of another element (and optionally
            // make it the same size)
            function Cover(bottom, top, ignoreSize) {
                var location = Sys.UI.DomElement.getLocation(bottom);
                //var location = $get(bottom);
                top.style.position = 'absolute';
                top.style.top = location.y + 'px';
                top.style.left = location.x + 'px';
                if (!ignoreSize) {
                    top.style.height = bottom.offsetHeight + 'px';
                    top.style.width = bottom.offsetWidth + 'px';
                }
            }
        </script>        <div align="center">
            <asp:Button ID="btnInfo" runat="server" Text="看我炫不炫" /></div>
        <div id="flyout" style="display: none; border-right: #99ccff 1px solid; border-top: #99ccff 1px solid;
            border-left: #99ccff 1px solid; border-bottom: #99ccff 1px solid">
        </div>
        <div id="info" style="display: none; border-right: #99ccff 1px solid; border-top: #99ccff 1px solid;
            border-left: #99ccff 1px solid; border-bottom: #99ccff 1px solid">
            Once you get the general idea of the animation's up, you'll want to play a bit.
            All of the animations are created from simple, reusable building blocks that you
            can compose together. Before long you'll be creating dazzling visuals. By grouping
            steps together and specifying them to be run either in sequence or in parallel,
            you'll achieve almost anything you can imagine, without writing a single line of
            code!
        </div>
        <cc1:AnimationExtender ID="openAnimation" runat="server" TargetControlID="btnInfo">
            <Animations>
            <OnMouseOver>
                <Sequence>
                    <EnableAction Enabled = "true" />
                    <ScriptAction Script = "Cover($get('btnInfo'),$get('flyout'))" />
                    <StyleAction AnimationTarget="flyout" Attribute="display" Value="block" />
                    <Parallel AnimationTarget="flyout" Duration =".3" Fps="25">
                        <Move Horizontal ="150" Vertical="50" />
                        <Resize Width="200" Height="300" />
                        <Color PropertyKey = "backgroundColor" StartValue="#AAAAAA" EndValue = "#FFFFFF" />
                    </Parallel>
                    <ScriptAction Script = "Cover($get('flyout'),$get('info'))" />
                    <StyleAction AnimationTarget="info" Attribute="display" Value="block" />
                    <FadeIn AnimationTarget="info" Duration=".2"/>                    
                    <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                </Sequence>            
            </OnMouseOver>
            </Animations>
        </cc1:AnimationExtender>
        <cc1:AnimationExtender ID="closeAnimation" runat="server" TargetControlID="btnInfo">
            <Animations>
            <OnMouseOut>
                <Sequence>
                    <StyleAction AnimationTarget="info" Attribute="display" Value="none" />
                    <StyleAction AnimationTarget="flyout" Attribute="display" Value="block" />
                    <Parallel AnimationTarget="flyout" Duration =".3" Fps="25">
                        <Move Horizontal ="-150" Vertical="-50" />
                        <Resize Width="0" Height="0" />
                        <Color PropertyKey = "backgroundColor" StartValue="#EEEEEE" EndValue = "#FFFFFF" />
                    </Parallel>                    
                    <StyleAction AnimationTarget="flyout" Attribute="display" Value="none" />
                </Sequence>            
            </OnMouseOut>
            </Animations>
        </cc1:AnimationExtender>
    </form>
</body>
</html>