为什么淡入效果不会在过渡后显示背景图像?使用asp:UpdatePanelAnimationExtender

时间:2011-11-01 20:29:41

标签: ajax updatepanel

以下是代码:

<body>
<form id="form1" runat="server">
<div>
<table width="100%">
<tr>
<td class="style1"></td>
<td class="style2">
<div id="back">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:Timer ID="timer1" runat="server" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
    <asp:Table ID="Table1" runat="server" Width="100%">
        <asp:TableRow>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label1" runat="server" Text="Hello1"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label2" runat="server" Text="Hello2"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label3" runat="server" Text="Hello3"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label4" runat="server" Text="Hello1"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label5" runat="server" Text="Hello2"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label6" runat="server" Text="Hello3"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label7" runat="server" Text="Hello1"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label8" runat="server" Text="Hello2"></asp:Label>
            </asp:TableCell>
            <asp:TableCell CssClass="trborder">
                <asp:Label ID="Label9" runat="server" Text="Hello3"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:AnimationExtender ID="upaeTopPanel" runat="server" TargetControlID="updPanel" BehaviorID="animation">
                    <Animations>                            
                        <OnUpdated>
                            <FadeIn Duration="1.5" Fps="30"></FadeIn>                                 
                        </OnUpdated> 
                    </Animations>
                </asp:AnimationExtender>
</div>
</td>
<td></td>
</tr>
</table>    
</div>
</form>

CSS:

 <style type="text/css">
    .trborder
    {
        border: solid 1px #000000;
    }
    #back
    {
        background-image: url(Images/mickey.jpg);
        background-position: center center;
        background-repeat: no-repeat;           
    }
    .style1
    {
        width: 317px;
    }
    .style2
    {
        width: 322px;
    }
</style>

1 个答案:

答案 0 :(得分:0)

我已经弄明白了怎么做,根据Ajax库中描述的fadeIn效果,FadeInAnimation执行从当前不透明度到最大不透明度的淡入淡出,因此我为小于1的值添加了一个值(这是最好的)

<FadeIn Duration="1.5" Fps="30" MaximumOpacity=".8"></FadeIn>

并且有效。

感谢。