Hey folks. I just want to say that I am not much of a javascript
developer and I could really use a hand getting something working...

Basically, I have a set of <divelements, each with a class of
"button". Like so:

<div class="button" style="display:none">
<a href="#"><img src="button.gif" /></a>
</div>

I want to do the following:

1) When the page loads, detect each div element and fade it in to 50%
opacity
2) bind two event watchers to the divs elements ( mouseover, mouseout )

on mouseover, I want the divs to increase to 100% opacity and on
mouseout, decrease back to 50%.

I have the following code right now, but it doesn't seem to be a smooth
transition of events until I mouseover the divs for the second time (
the first run is a bit jittery).

I put this together using code I found from here and there, so if it's
kludge, please help me correct it.

window.onload = function(){
var btnObjs = document.getElementsByClassName( 'button' );
for (var i=0; i < btnObjs.length; i++) {
var cntlD = btnObjs[i];
new Effect.Appear(cntlD,{from:0,to:0.5});
Event.observe( cntlD, 'mouseover', function(){new
Effect.Appear(this,{from:0.5,to:1.0})}, false);
Event.observe( cntlD, 'mouseout', function(){new
Effect.Fade(this,{from:1.0,to:0.5})}, false);
}
}

--
Koncept <<
"The snake that cannot shed its skin perishes. So do the spirits who are
prevented from changing their opinions; they cease to be a spirit." -Nietzsche