CSSinStyleHello! I'm trying to get 3 divs to fade in about a second apart when one button is clicked. I've tried everything and it isn't working how I want. Just the first sentence fades in on click but the other 2 will not! Thanks.
/*-------HTML---------*/
<input type="button" onclick="togglegroup1()" value="Click" />
<div id="fadeBlock1" class="toggleHide">I want to fade in when the button is pressed first</div>
<div id="fadeBlock2" class="toggleHide">I want to fade in when the button is pressed second</div>
<div id="fadeBlock3" class="toggleHide">I want to fade in when the button is pressed third</div>
/*-----------CSS-----------*/
.toggleHide {
width: 100%;
text-align:left;
display: none;
font-weight: bold;
}
/*-----TIMER------*/
function togglegroup1()
{
var timeout1 = window.setTimeout('FadeOpacity(fadeBlock1);', 1000);
var timeout2 = window.setTimeout('FadeOpacity(fadeBlock2);', 2000);
var timeout3 = window.setTimeout('FadeOpacity(fadeBlock3);', 3000);
// to cancel:
window.clearTimeout(timeout1);
window.clearTimeout(timeout2);
window.clearTimeout(timeout3);
}
/*---------------------- Fade Script -------------------*/
function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps)
{
var steps = Math.ceil(fps * (time / 1000));
var delta = (toOpacity - fromOpacity) / steps;
FadeOpacityStep(elemId, 0, steps, fromOpacity,
delta, (time / steps));
}
function FadeOpacityStep(elemId, stepNum, steps, fromOpacity,
delta, timePerStep)
{
SetOpacity(document.getElementById(elemId),
Math.round(parseInt(fromOpacity) + (delta * stepNum)));
if (stepNum < steps)
setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1)
+ ", " + steps + ", " + fromOpacity + ", "
+ delta + ", " + timePerStep + ");",
timePerStep);
}