Show/Hide div 一段时间

Question

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

这是非常基础的。参见 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（回到原来的样子）？

Answer 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);

});

Answer 2

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

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

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

Example fiddle

Show/Hide div 一段时间

Show/Hide div for a set period

html

forms

jquery