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>
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.