Menu
Ok, here’s what I’m trying to do… I’m trying to have a slick fade in / fade out to my buttons on my page, however… it’s getting stuck in certain states.
Say I have two buttons (btn1 and btn2) and attach “fade_in” to onmouseover and “fade_out” to onmouseout… say both my fades takes 300ms…
If I were to fire btn1 fade_in, btn1 fade_out, bt2 fade_in in quick succession (before the 300ml) btn1 gets stuck in the fade in state… and never fades out. It’s not that the events aren’t firing there’s some issue with my function… here’s my code:
(Also, if there’s a better way of doing this, let me know!)
[CODE]
<div id=”nav”>
<ul>
<li><a id=”nav-link-home”
onmouseover=”currentOpac(‘nav-link-home’, 100, 300);”
onmouseout=”currentOpac(‘nav-link-home’, 0, 300);”
onfocus=”currentOpac(‘nav-link-home’, 100, 300);”
onblur=”currentOpac(‘nav-link-home’, 0, 300);”
title=”Home” href=”index.php”>
<span></span>Home</a>
</li>
<li><a id=”nav-link-biography”
onmouseover=”currentOpac(‘nav-link-biography’, 100, 300);”
onmouseout=”currentOpac(‘nav-link-biography’, 0, 300);”
onfocus=”currentOpac(‘nav-link-biography’, 100, 300);”
onblur=”currentOpac(‘nav-link-biography’, 0, 300);”
title=”Biography” href=”biography.php”>
<span></span>Bigography</a>
</li>
</ul>
</div>
[CODE]
function currentOpac(id, opacEnd, millisec) {
// standard opacity is 100
var currentOpac = 100;
// if the element has an opacity set, get it
if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
}
// call for the function that changes the opacity
opacity(id, currentOpac, opacEnd, millisec)
}
function opacity(id, opacStart, opacEnd, millisec) {
// speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
// determine the direction for the blending,
// if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i–) {
setTimeout(“changeOpac(” + i + “,'” + id + “‘)”,(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(“changeOpac(” + i + “,'” + id + “‘)”,(timer * speed));
timer++;
}
}
}
// change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = “alpha(opacity=” + opacity + “)”;
}