Question

我希望<div id="fadeout">在点击提交按钮时淡出，然后<div id="fadein">淡入以替换之前的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>

Answer 1

将其添加到您的脚本代码中：

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

JSFiddle Demo

Answer 2

使用jQuery的fadeIn和fadeOut函数可以使这个任务更容易。见http://jsfiddle.net/BpnVQ/2/

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

Answer 3

我改变了你正在使用的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>

Answer 4

置

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

在你的剧本中，应该做到这一点。

我希望第一个div淡出然后第二个使用虚拟提交按钮淡化

4 个答案: