My fade in goes to all opaque for it goes to transparent

Question

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?

Answer 1

Solved by changing Effect.Appear to

//show the bg
    new Effect.Appear('darkBackgroundLayer', {duration: 0.3,from: 0,to: 0.7});