Fade effect attribute/function in javascript custom script?

Question

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.

cocco · Accepted Answer · 2015-10-13 22:57:22Z

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/ not working anymore

http://jsfiddle.net/RAu8Q/17/ new syntax 10-2015

if you have any questions just ask.

Willy · Accepted Answer · 2014-02-21 16:08:13Z

1

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.

answered Feb 21, 2014 at 16:08

Willy

1,0748 silver badges24 bronze badges

Comments

Nicolae Olariu · Accepted Answer · 2014-02-21 16:22:39Z

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.

blackeyebeefhorsefly · Accepted Answer · 2014-02-21 17:16:11Z

0

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/

answered Feb 21, 2014 at 17:16

blackeyebeefhorsefly

1,9441 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

Fade effect attribute/function in javascript custom script?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related