My fade in goes to all opaque for it goes to transparent
- by DerNalia
So, I'm trying to fade in a transparent div, kinda like hulu does when you click dim lights... here is what i have:
//show the bg
new Effect.Appear('darkBackgroundLayer', {duration: 0.3});
then when my pop up is initialized
// create the div for background dimming
if($('darkBackgroundLayer')){
Element.remove('darkBackgroundLayer')
}
var transparentBG = document.createElement('div');
transparentBG.className = 'darkenBackground';
transparentBG.id = "darkBackgroundLayer"
transparentBG.style.display = "none";
document.body.appendChild(transparentBG);
and the CSS for the new div
.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
but, currently, it fades in... all the way to a solid back, then jumps to the .7 opacity...
ideas?
