Menu
Hi,
I’ve written this script which fade one div out, and makes the second div appear next and so on.
sometimes after one div is fading out, nothing appears next. I don’t know what is the bug that cause this. Specially it gets more buggy when there are <marguee> in the page or some ajax codes running also. it confuses a lot
i’d really appreciate if someone could take a look at it :
[CODE]
<input type=”hidden” id=”to_fade” value=”1″ /><input type=”hidden” id=”how_many” value=”5′” /> <– how many objects are total
<script type=”text/javascript”>
function stop_it(which_one)
{
clearInterval(which_one);
}
function go_fade()
{
my_interval = setInterval (‘fade_it()’, 2 );
}
function fade_it()
{
which_one = document.getElementById(‘to_fade’).value;
actual_number = parseInt(which_one);
next_number = actual_number + 1 > document.getElementById(‘how_many’).value? 1 : actual_number + 1;
itsop = document.getElementById(‘sub’ + which_one).style.opacity;
itsop = parseFloat(itsop);
itsop -= 0.01;
document.getElementById(‘sub’ + which_one).style.opacity = itsop;
document.getElementById(‘sub’ + which_one).style.filter = ‘alpha(opacity=’ + itsop*100 + ‘)’;
if ((parseInt(document.getElementById(‘sub’ + which_one).style.opacity * 100))/100 == 0)
{
stop_it(my_interval);
document.getElementById(‘sub’ + which_one).style.display = ‘none’;
document.getElementById(‘sub’ + next_number).style.display = ‘block’;
document.getElementById(‘to_fade’).value = next_number;
my_interval2 = setInterval (‘show_it()’, 5 );
}
}
function show_it()
{
which_one = document.getElementById(‘to_fade’).value;
itsop = document.getElementById(‘sub’ + which_one).style.opacity;
itsop = parseFloat(itsop);
itsop += 0.01;
document.getElementById(‘sub’ + which_one).style.opacity = itsop;
document.getElementById(‘sub’ + which_one).style.filter = ‘alpha(opacity=’ + itsop*100 + ‘)’;
if ((parseInt(document.getElementById(‘sub’ + which_one).style.opacity * 100))/100 == 1)
{
stop_it(my_interval2);
}
}
setInterval(‘go_fade()’, 5000 );
</script>
<div id=”sub1″ style=”display:block;opacity:1;filter:alpha(opacity=100);”>content1</div>
<div id=”sub2″ style=”display:none;opacity:1;filter:alpha(opacity=100);”>content2</div>
<div id=”sub3″ style=”display:none;opacity:1;filter:alpha(opacity=100);”>content3</div>
<div id=”sub4″ style=”display:none;opacity:1;filter:alpha(opacity=100);”>content4</div>
<div id=”sub5″ style=”display:none;opacity:1;filter:alpha(opacity=100);”>content5</div>