我的淡入变得完全不透明，因为它变得透明

Question

所以，我试图淡入一个透明的div，有点像hulu在你点击昏暗的灯光时所做的那样...这就是我所拥有的：

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

然后当我的弹出窗口初始化

// 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);

以及新div的CSS

.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;
    }

时，但目前，它淡入……一直到坚实的背部，然后跳到 0.7 不透明度……

有什么想法吗？

Answer 1

通过改变 Effect.Appear 来解决

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