单击按钮即可显示数据

Question

我有2个按钮Start and Walk Away 。 我希望最初不显示“走开”按钮，但在单击“开始”按钮后，应该出现“走开”按钮（我不想使用切换）。

我有2个问题：

1）在单击开始按钮时，我可以隐藏并显示第二个按钮，但是最初我不能隐藏该按钮。 2）在“开始”按钮的单击上出现“走开”按钮后，我希望“走开”按钮应在2分钟后自动隐藏。 我不能这样做

目前可以正常运行的代码是。 摆弄代码

 $("#start").click(function () { $("#walkaway").show(); }); 

 <button type="submit" name="submit" id="start" value="Submit">Start</button> <button type="submit" name="submit" id="walkaway" value="Submit">Walk Away</button> 

Answer 1

要最初隐藏按钮，请使用CSS：

#walkaway {
    display: none;
}

要在2秒后隐藏按钮，请使用delay ：

$(document).ready(function () {
    $("#start").click(function () {
        $("#walkaway").fadeIn().delay(2000).fadeOut();
    });
});

演示： http : //jsfiddle.net/tusharj/saytq920/2/

文件： http ： //api.jquery.com/delay/

设置计时器以延迟队列中后续项目的执行。

Answer 2

使用纯jquery使用它

$(document).ready(function () {
    $("#walkaway").hide();

    $("#start").click(function () {
        $("#walkaway").show();
        setTimeout(function () {
            $("#walkaway").hide();
        }, 120000);
    });

});

Answer 3

要最初隐藏开始按钮，可以使用css并将其设置为：

#walkaway {
    display: none;
}

要么

#walkaway {
    visibility: hidden;
}

取决于您的布局和要实现的目标。

要在2分钟后隐藏按钮，您需要使用delay

$(document).ready(function () {
    $("#start").click(function () {
       $("#walkaway").fadeIn().delay(120000).fadeOut();
    });
});

delay以毫秒为单位，因此120秒= 2分钟= 120.000毫秒。

Answer 4

或者您可以使用set timeOut函数，如下所示：

 $(document).ready(function () { $("#walkaway").hide(); $("#start").click(function () { $("#walkaway").show(); setTimeout(function () { $("#walkaway").hide(); }, 2000); // <-- change to 120000 for 2 minutes }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="submit" name="submit" id="start" value="Submit">Start</button> <button type="submit" name="submit" id="walkaway" value="Submit">Walk Away</button> 

Answer 5

你可以试试这个

$(document).ready(function () {
    test = function () {
        $("#walkaway").show();
    };

    test1 = function () {
        $("#walkaway").hide();
    };

    test1();

    $("#start").click(function () {
        test();
        setTimeout(test1, 120000);
    });

});

Answer 6

尝试这种方式：

<button type="submit" name="submit" id="walkaway" value="Submit" style="display:none">Walk Away</button>