-1

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?

Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352
  • 1
    This isn't jQuery. Looks like prototypejs/scriptaculous. – user113716 Jun 11 '10 at 19:32
  • Even If this is JQuery, $('darkBackgroundLayer') won't work unless you use a prefix like # – jAndy Jun 11 '10 at 19:40
  • Ive integrated this with the facebox, if that helps http://github.com/defunkt/facebox – NullVoxPopuli Jun 11 '10 at 20:06
  • @jAndy - That's what clued me in to prototypejs. That is its way to get an element by ID. No `#` needed. – user113716 Jun 11 '10 at 20:15
  • 1
    @DerNalia - I don't think you understand. The facebox link you gave is a jQuery plugin. The code you're using above is not jQuery code. It is prototypejs code. http://www.prototypejs.org/ and Scriptaculous code. http://script.aculo.us/ – user113716 Jun 11 '10 at 20:17

1 Answers1

0

Solved by changing Effect.Appear to 

//show the bg
    new Effect.Appear('darkBackgroundLayer', {duration: 0.3,from: 0,to: 0.7});
NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352