javascript - javascript自定义脚本中的淡入淡出效果属性/函数？

Question

我需要在我的 javascript 函数上添加淡入淡出效果

Javascript

<script type="text/javascript">
window.onload=function() {
  loginBtn = document.getElementById('loginBtn');
  fader = document.getElementById('login_fader');
  login_box = document.getElementById('login_box');
  closebtn = document.getElementById('closelogin');
  loginBtn.onclick=function(){
    fader.style.display = "block";
    login_box.style.display = "block";
  }
  closebtn.onclick=function() {
    fader.style.display = "none";
    login_box.style.display = "none";
  }
}
</script>

HTML

<div id="login_fader">&nbsp;</div>
<div id="login_box">
  <table class="table-login">
    <th>Login or Register</th>
    <th><a id="closelogin">X</a></th>
    <tr>
      <td>Login</td>
  <td>Register</td>
    </tr>
  </table>
</div>

CSS

<style type="text/css">
  #loginBtn {
    float: right;
    margin-top: -6%;
    cursor:pointer;
  }
  #login_fader {
   background: black;
   opacity: .5;
   -moz-opacity: .5;
   -filter: alpha(opacity=50);
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 5;
   display: none;
  }
#login_box {
  width: 320px;
  height: 200px;
  border: 1px white solid:
  background: #5a5a5a;
  position: fixed;
  top: 25%;
  left: 35%;
  z-index: 10;
  display: none;
}

.table-login {
  background: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 5px 2px;
  opacity: 0.95;
}

#closelogin {
  float:right;
  cursor:pointer;
}
</style>

JS fiddle

http://jsfiddle.net/U3n4j/

我已经尝试使用 css3 中的 transition 属性，并尝试将两者应用于 login_box 和 login_fader。 我在网上找到了一些函数，但不知道如何将它们链接到我已经创建的函数，我在想是否有任何属性可以直接将它们链接到我的函数。

Answer 1

在 css3 和 js 1.7++ 中淡入静态框的正确方法

这是一个仅使用 webkit 和现代 javascripts classList.add

的示例

但您可以添加其他前缀。-moz,-ms,-o

在这个例子中我只展示了动画。

CSS

.box{
 width:100%;
 height:100%;
 position:fixed;
 left:0;top:-100%;/*notice TOP -100%*/
 opacity:0;
 -webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
 background-color:rgba(0,0,0,0.7);
}
.box.active{
 -webkit-transition:opacity 700ms ease,top 0 linear 0;
 /*top transition not needed but could help to understand*/
 top:0;
 opacity:1;
}

js

function show(){
 box.classList.add('active');
}
function hide(){
 box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);

演示

http://jsfiddle.net/RAu8Q/不再工作了

http://jsfiddle.net/RAu8Q/17/ 新语法 10-2015

如果您有任何问题，请尽管提问。