current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I need to add a fade effect on my javascript function

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/

I have tried using the transition properties from css3 and tried applying both to login_box and login_fader. I found some functions on the net but don't know how to link them to my already made function and i was thinking if there are any properties directly that i can link them to my function.

share|improve this question

4 Answers 4

up vote 2 down vote accepted

Proper way to fade in a static box in css3 and js 1.7 ++

This is a example using only webkit and modern javascripts classList.add

but you can add the other prefixes.-moz,-ms,-o

in this example i show only the animation.

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

DEMO

http://jsfiddle.net/RAu8Q/

if you have any questions just ask.

share|improve this answer
up vote 1 down vote

I can't tell exactly what effect you're trying to achieve, but if you're going to use CSS transitions, then you need to be transitioning between numerical properties. I.e., you can't expect a fade to occur simply by transitioning from display:block to display:none. You'd want to use opacity instead.

share|improve this answer
up vote 1 down vote

First of all, don't try to use css transitions in conjunction with display property, that won't work! Instead, try transitioning other properties. Let's take opacity for instance (we'll simulate display: none/block functionality by setting opacity to 0/1)

Secondly, set the start value for opacity to 0 on the desired HTML element (the one you'd like to animate). Specify which property to animate (opacity in our case):

transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;

When the login button is clicked, set opacity to 1:

loginBtn.onclick=function() {
    fader.style.opacity = 1;
    login_box.style.opacity = 1;
}

When the close button is clicked, set opacity back to 0:

closebtn.onclick=function() {
    fader.style.opacity = 0;
    login_box.style.opacity = 0;
  }

Link to fiddle.

share|improve this answer
up vote 0 down vote

I believe that what you want to do needs css animations. So just create an animation class that fades out the target element and apply it after the user logs in.

@keyframes fadeOut {
    from: {
        opacity:1;
    },
    to: {
        opacity:0;
    }
}

then use apply it on the class 

.fadeOut {
     animation:fadeOut 0.25s forwards;
}

EXAMPLE

http://jsfiddle.net/zgPrc/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.