PHP Developers Network
http://forums.devnetwork.net/

Use CSS to fade a Div in and Out with Transition?
http://forums.devnetwork.net/viewtopic.php?f=68&t=141826
Page 1 of 1

Author:  simonmlewis [ Mon Sep 28, 2015 9:30 am ]
Post subject:  Use CSS to fade a Div in and Out with Transition?

Syntax: [ Download ] [ Hide ]
<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?

Author:  lindseynicole [ Mon Oct 05, 2015 3:34 am ]
Post subject:  Re: Use CSS to fade a Div in and Out with Transition?

#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;
}‚Äč

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/