Opacity - Fading Up Text (Simple Script)

by **MLR** on Mon Aug 17, 2009 6:20 pm

Hello: I'm trying to get text to fade up in opacity. Using a simple model script like this (below), I can get the text to fade down in opacity but not up. I would appreciate help. Thank-you. MLR
===================================================
<script type="text/javascript">
function onloadMLR()
{
setInterval("startFadeMLR()",5);
}
function startFadeMLR()
{
var currentOpacityMLR=document.getElementById("textMLR").style.opacity;
if (currentOpacityMLR<1)
{
document.getElementById("textMLR").style.opacity+=0.02;
}
}
</script>
</head>
<body onload="onloadMLR()">
<div style="opacity : 0;" id="textMLR">TEXT</div>

by **MLR** on Tue Aug 18, 2009 12:40 am

I received a resolving answer from Jeff (user name: BabyJeffy). Thank-You, MLR ...

Code: Select all: <script type="text/javascript"> var FADE_FRAME_RATE = 5; // milliseconds between frames var FADE_FRAME_AMOUNT = 0.002; // the amount of opacity to increase each frame var timerHandle; function onloadMLR() { timerHandle = setInterval("startFadeMLR('textMLR')", FADE_FRAME_RATE); } function startFadeMLR(nodeId) { var nodeToFade = document.getElementById(nodeId); if (nodeToFade.style.opacity == '') { // if opacity is not set then stop everything nodeToFade.style.opacity = 1; } var currentOpacityMLR = parseFloat(nodeToFade.style.opacity); if (currentOpacityMLR < 1) { nodeToFade.style.opacity = currentOpacityMLR + FADE_FRAME_AMOUNT; } else { nodeToFade.style.opacity = 1; clearTimeout(timerHandle); timerHandle = null; } } window.onload = onloadMLR; </script> </head> <body> <h6>Test Fade Up Opacity</h6> <p style="opacity:0.0;" id="textMLR">Lorem ipsum dolor sit amet.</p>

by **MLR** on Tue Aug 18, 2009 12:42 am

Where I went wrong ... The left of the line (document.getElementById("textMLR").style.opacity) returns a string. The += will perform a string concatenation (because the first part is a string). The reason it would work with -= is that it will always try to convert the left to a number.

Opacity - Fading Up Text (Simple Script)

Opacity - Fading Up Text (Simple Script)

Re: Opacity - Fading Up Text (Simple Script)

Re: Opacity - Fading Up Text (Simple Script)

Who is online