Question

我有2个按钮Start和Walk Away。我想要最初的走开按钮不应该出现，但在点击开始按钮时，应该出现走开按钮（我不想使用切换）。

我有两个问题：

1）点击开始按钮，我可以隐藏并显示第二个按钮，但我最初无法隐藏按钮。 2）点击开始按钮后出现Walk Away按钮后，我希望2分钟后自动隐藏走开按钮。我无法这样做

目前正常运行的代码是。代码fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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();
    });
});

延迟以毫秒为参数，因此120秒= 2分钟= 120.000毫秒。

Answer 4

或者您可以使用set timeOut函数作为以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

单击按钮显示数据

6 个答案: