In my WebForm ASP.Net application, I have implemented a feature where I change the text on the web page. To draw user attention to this change, I want to fade out the old text completely, replace it with new text, and then fade in the new text.
Currently, I have partially achieved this functionality using JavaScript. Here are the codes I am using for fading out and fading in text:
JavaScript
<script type="text/javascript">
function toHex(d) {
return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
}
var direction = 1;
var timer_is_on = 0;
var rgb = 0;
function timedCount() {
var lab = document.getElementById('lblMessage');
if (direction == 1) {
rgb = rgb + 15;
}
if (direction == -1) {
rgb = rgb - 15;
}
lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);;
if (rgb >= 255 || rgb <= 0) {
if (direction == 1) {
direction = -1;
}
else {
timer_is_on = 0;
return;
}
}
setTimeout(timedCount, 50);
}
function startEffect() {
if (!timer_is_on) {
timer_is_on = 1;
direction = 1;
rgb = 0;
timedCount();
}
}
</script>
ASPX
<form id="frm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="pnlMain" runat="server">
<ContentTemplate>
<div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
<span id="lblMessage">No Record is Selected</span>
</div>
<button onclick="startEffect()">Start!</button>
</ContentTemplate>
</asp:UpdatePanel>
</form>
The Challenge
I still need to figure out two things:
- How to change the text after the fade-out animation completes
- How to accomplish all of this from code-behind in C# without relying on jQuery or any other JavaScript library.