Page 1 of 1

Use CSS to fade a Div in and Out with Transition?

Posted: Mon Sep 28, 2015 9:30 am
by simonmlewis

Code: Select all

<script type="text/javascript">
    function showDiv() {
        if (document.getElementById('job-application').style.display == 'block') {
            document.getElementById('job-application').style.display = 'none';
            document.getElementById('job-application').style.transition = 'display 0.2s';
            
        } else {
            document.getElementById('job-application').style.display = 'block';
        }
        
        
        if (document.getElementById('applicationbutton').style.display == 'none') {
            document.getElementById('applicationbutton').style.display = 'block';
            document.getElementById('applicationbutton').style.transition = 'display 0.2s';
        } else {
            document.getElementById('applicationbutton').style.display = 'none';
        }
        
    }
 </script>  

<div class='job-left-apply' id='applicationbutton'><a
 onClick=\"showDiv();\" 
>Apply Now</a></div>
<div id='job-application'>
<div class='job-left-apply' style='background-color: #153878;'><A>Enter some Info</a></div><br/>
To apply for this role, please enter your covering letter/note to explain why you are suitable for this role.  Your CV will automatically be applied with this note.
<form>
<textarea name='description'></textarea><br/>
<input type='submit' value='Submit Application'>
</form>
</div>
I have a Job page, with an Apply button. When they click it, the DIV containing that button disappears and a DIV with "Enter details here" and a form appears.

But I dont' want it to just be "on/off".. I want it to fade. So am trying to use the getElementById to do that.

I can make it appear, not appear, but the transition isn't working. Any ideas why?

Re: Use CSS to fade a Div in and Out with Transition?

Posted: Mon Oct 05, 2015 3:34 am
by lindseynicole
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}​