为什么淡入淡出效果在转换后不显示背景图像？使用 asp:UpdatePanelAnimationExtender
这是代码：
<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>
Here is the code:
<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>
And the 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经弄清楚了该怎么做，根据Ajax库中描述的fadeIn效果，FadeInAnimation执行从当前不透明度到最大不透明度的淡入，所以我添加了一个小于1的值（这是顶部）
并且它起作用了。
谢谢。
I have figured it out how to do it, according to the fadeIn effect described in the Ajax library, the FadeInAnimation performs a fade in from the current opacity to the maximum opacity, so I added a value for that less than 1 (which is the top)
and it worked.
thanks.