显示/隐藏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);

});