Я хочу, чтобы первый div исчезал, а затем второй, чтобы исчезнуть, используя кнопку отправки фиктивных данных

Я хочу, чтобы <div id="fadeout"> исчезал при нажатии кнопки отправки, а затем , чтобы исчезнуть, чтобы заменить предыдущий div. Не очень-то удачи.Я хочу, чтобы первый div исчезал, а затем второй, чтобы исчезнуть, используя кнопку отправки фиктивных данных

Я пробовал несколько методов, но просто не могу понять это.

Любая помощь приветствуется

<html> 
    <title>Break Calculator</title> 

<head> 
<style> 
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;} 
</style> 


<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript"> 
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>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<=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;} 
    }; 

</script> 
</head> 

<body> 


    <div class="header"><img src="breakcalc.png"></div> 
<div id="fadeout"> 
    <div class="salary_div"> 
     <input id="salaries" type="text" class="salary_input"> 
    </div> 

    <div class="submit_div"> 
     <a id="submit"><button class="button_style">Submit</button></a> 
    </div> 
</div> 

<div id="fadein"> 
    <div class="clock" id="slideout"> 
     <span id="mins" >00</span>:<span id="secs">00</span> 
    </div> 

    <div class="money"> 
     <span>$ </span><span id="money">0.00</span> 
    </div> 

    <div class="buttons"> 
     <a href="#" id="button" onclick="start()" ondblclick="return false;"><button class="button_style">Start</button></a> 
     <a href="#" id="button" onclick="pause()"><button class="button_style">Stop</button></a> 
     <a href="#" id="button" onclick="reset()"><button class="button_style">Reset</button></a> 
    </div> 
</div> 
</body> 

</html>

источник

2013-09-18 user2687642

Вы хотите, второй исчезать после или во время 1-го исчезают вне дома? –

после perferablly – user2687642

Вы можете сделать эту задачу с помощью функции FadeIn и FADEOUT JQuery в. См http://jsfiddle.net/BpnVQ/2/

$(document).ready(function() { 
    $('button').click(function() { 
     $("#one").fadeOut('slow', function() { 
      $("#two").fadeIn('slow'); 
     }); 
    }); 
});

источник

2013-09-18 17:11:17 Julio

Я изменил библиотеку Jquery вы используете - один раньше, не решала для меня. Кроме того, я добавил вызов готов и удалить вложенности <button> in <a>.

<html> 
     <title>Break Calculator</title> 
    <head> 
    <style> 
    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;} 
    </style> 


    <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    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>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<=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;} 
     }; 

     $(document).ready(function() 
     { 
     $("#fadein").hide(); 
      $("#submit").click(function() 
      { 
       $("#fadeout").hide(300); 
       $("#fadein").show(300); 
      }); 
     }); 
    </script> 
    </head> 

    <body> 


     <div class="header"><img src="breakcalc.png"></div> 
    <div id="fadeout"> 
     <div class="salary_div"> 
      <input id="salaries" type="text" class="salary_input"> 
     </div> 

     <div class="submit_div"> 
      <button id="submit" class="button_style">Submit</button> 
     </div> 
    </div> 

    <div id="fadein"> 
     <div class="clock" id="slideout"> 
      <span id="mins" >00</span>:<span id="secs">00</span> 
     </div> 

     <div class="money"> 
      <span>$ </span><span id="money">0.00</span> 
     </div> 

     <div class="buttons"> 
      <a href="#" id="button" onclick="start()" ondblclick="return false;"><button class="button_style">Start</button></a> 
      <a href="#" id="button" onclick="pause()"><button class="button_style">Stop</button></a> 
      <a href="#" id="button" onclick="reset()"><button class="button_style">Reset</button></a> 
     </div> 
    </div> 
    </body> 

    </html>

источник

2013-09-18 17:13:13 Irwin

размещения

$(document).on("click", ".submit_div", function() { 
    $("#fadeout").fadeOut('slow', function() { 
     $("#fadein").fadeIn('slow'); 
    }); 
});

в сценарии, должны сделать это случиться.

источник

2013-09-18 17:13:49

если вы включите 'jquery', почему вы его не используете? –

Добавить это в тег сценария:

$(document).ready(function() { 
    $("#fadein").hide(); 
    $("#submit button").click(function() { 
     $("#fadeout").fadeOut("slow", function() { 
      $("#fadein").fadeIn("slow"); 
     }); 
    }); 
});

JSFiddle Demo

источник

2013-09-18 17:15:29 Tricky12

Зачем это произошло? Никто больше не указал, что ему нужно скрыть div, который он хочет «затухать», иначе он не исчезнет. – Tricky12

Нет причин, чтобы я мог видеть ... +1 – gibberish

Также обратите внимание, что оригинал сообщения не был загружен jQuery (только jQuery мигрирует). OP захочет включить jQuery для ответа (или любого из этих ответов) на работу. –

Я хочу, чтобы первый div исчезал, а затем второй, чтобы исчезнуть, используя кнопку отправки фиктивных данных

ответ

Смежные вопросы