Question

I’m trying to create a fading out and fading in effect using JavaScript and CSS3. The goal is to have a div shrink in width when clicked and have the text contained within it simultaneously fade out. Then when it is clicked again, the div expands back to its normal width, and the text fades back in.

Here is the HTML:

<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>  

Here is the CSS:

  #box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

Here is the javascript:

var box1
var fader

window.onload = function() {
    box1 = document.getElementById('box1');
    fader = document.getElementsByClassName('fader');
    } 

function slide1(){

if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
    }
 else {
    box1.style.width='10%';
 fader[0].style.opacity='0';
    fader[0].style.transition='opacity 0.75s ease-in';
 }
}

It’s working for the fade-out, but for the fade-in it is immediately transitioning from 0 opacity to 1 opacity… there’s no fade-in. Any ideas?

Answer 1

I actually asked a very similar question with the same issue a while back: Opacity effect works from 1.0 to 0, but not 0 to 1.0. Check the out and see if it works for you.

Otherwise, try adding a class to the fader element instead of adding a style declaration. Then, in your actual CSS, write the code for the fader element transition.