在一段时间内显示/隐藏 div答案

【问题标题】：Show/Hide div for a set period在一段时间内显示/隐藏 div
【发布时间】：2015-01-08 16:07:49
【问题描述】：

在我的表单中，我在单击时隐藏了提交按钮，并显示了一个显示 submitting... 的 div。

这是非常基本的。见jsfiddle。

jQuery 代码是：

jQuery("#subnewtopicform").submit(function(e) {

    // Hide button by button ID
    jQuery("#subnewtopic").hide();

    // Show hidden div
    jQuery("#submitted").show();
});

还有 HTML：

<form action="" method="post" id="subnewtopicform" />           
  Title:
 <input type="text" name="title" /><br/>
 <input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" /> 
</form>

<div id="submitted" style="display:none">Submitting...</div>

我的问题是，我怎样才能让它在 20 秒后再次显示 #subnewtopic 而隐藏 #subnewtopic（回到原来的样子）？

【问题讨论】：

标签： jquery html forms

【解决方案1】：

您可以使用setTimeout 来实现此目的 http://jsfiddle.net/soyn0xag/47/

 setTimeout(function() {
    jQuery("#subnewtopic").show();
    jQuery("#submitted").hide();
 },20000);

完整的 javascript 可能是：

jQuery("#subnewtopicform").submit(function(e) {

    // Hide button by button ID
    jQuery("#subnewtopic").hide();

    // Show hidden div
    jQuery("#submitted").show();

    setTimeout(function() {
       jQuery("#subnewtopic").show();
       jQuery("#submitted").hide();
    },20000);

});

【讨论】：

那个 jsfiddle 和我发布的一样。

【解决方案2】：

您可以使用setTimeout 在设置延迟后运行代码块：

$("#subnewtopicform").submit(function (e) {
    $("#subnewtopic").hide();
    $("#submitted").show();

    setTimeout(function() {    
        $("#subnewtopic").show();
        $("#submitted").hide();
    }, 20000); 
});

Example fiddle

【讨论】：