Databases
StackOverflow2013
Postsdbo
POI want the first div to fade out and then second to fade by using a dummy submit button
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI want the first div to fade out and then second to fade by using a dummy submit button
    text
    copied!<p>I want the <code>&lt;div id="fadeout"&gt;</code> to fadeout when the submit button is clicked, and then the <code>&lt;div id="fadein"&gt;</code> to fade in to replace the previous div. Not having much luck at all.</p> <p>I've tried several methods but just can't figure it out.</p> <p>Any help is appreciated</p> <pre><code> &lt;html&gt; &lt;title&gt;Break Calculator&lt;/title&gt; &lt;head&gt; &lt;style&gt; body { background: #0e415f; min-width:55em; max-width:200em; font-family: Omnes, Myriad Pro, arial, Helvetica; color: #f1a400;} .salary_div { width: 12em; margin: 0 auto;} .salary_input{ width: 6em; height: 1.2em; font-size: 2em;} .submit_div { width: 8em; margin: 1em auto;} .header { width: 55em; margin: 0 auto;} .clock { border: .1em solid #f1a400 double; border-radius: .1em; border-style: double; width: 3.5em; margin: 20 auto; font-size: 10em; text-align:center;} .money { border: .1em solid #f1a400 double; border-radius: .1em; border-style: double; width: 3.5em; margin: 20 auto; font-size: 10em; text-align:center;} .buttons { width: 24.5em; margin: 1em auto;} .button_style{ height:2.5em; width:6em; font-size:1.2em; margin: 0 .3em; background: #f1a400; border-radius: .4em; border: 0;} &lt;/style&gt; &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var salary; var seconds=-1.0; /* To start clock at 0 seconds */ var min=0; var time; var secPay; var timerPay = 0; function getSalary() { var salaryAm = document.getElementById("salaries"); salary = salaryAm.value; secPay = salary/(52*40*60*60); // Weeks * Hours * Minutes * Seconds *// } function timer(){ seconds++; if(seconds&gt;59){ min++; document.getElementById("mins").innerHTML=padTimer(min); seconds=0;} document.getElementById("secs").innerHTML=padTimer(seconds); document.getElementById("money").innerHTML=parseFloat(secPay*timerPay++).toFixed(2); }; function padTimer(x) { if (x&lt;=9) { x = ("0"+x); } return x;} function start(){ if (getSalary()) { alert("please check input"); } else { time=setInterval(timer, 1000); timer();} }; function pause() { clearInterval(time); seconds--; timerPay--;}; function reset(){ seconds=-1.0; timerPay=0; time=0; if (min !=0){ min=0;} }; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header"&gt;&lt;img src="breakcalc.png"&gt;&lt;/div&gt; &lt;div id="fadeout"&gt; &lt;div class="salary_div"&gt; &lt;input id="salaries" type="text" class="salary_input"&gt; &lt;/div&gt; &lt;div class="submit_div"&gt; &lt;a id="submit"&gt;&lt;button class="button_style"&gt;Submit&lt;/button&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="fadein"&gt; &lt;div class="clock" id="slideout"&gt; &lt;span id="mins" &gt;00&lt;/span&gt;:&lt;span id="secs"&gt;00&lt;/span&gt; &lt;/div&gt; &lt;div class="money"&gt; &lt;span&gt;$ &lt;/span&gt;&lt;span id="money"&gt;0.00&lt;/span&gt; &lt;/div&gt; &lt;div class="buttons"&gt; &lt;a href="#" id="button" onclick="start()" ondblclick="return false;"&gt;&lt;button class="button_style"&gt;Start&lt;/button&gt;&lt;/a&gt; &lt;a href="#" id="button" onclick="pause()"&gt;&lt;button class="button_style"&gt;Stop&lt;/button&gt;&lt;/a&gt; &lt;a href="#" id="button" onclick="reset()"&gt;&lt;button class="button_style"&gt;Reset&lt;/button&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload