单击按钮显示div并在5秒后隐藏相同的div

Question

我有一个电子邮件提交表单，当用户提交时，我想在输入下方显示一个确认文本。 5秒后，确认文本必须再次淡出。

这是我的代码

<div class="input-group newsletter-group"> 
    <input type="text" class="form-control" id="email-to-submit"> 
    <div id="submit-email" class="input-group-addon">go!</div> 
</div> 
<div id="email-submit-form">THANKS!</div> 
<div id="invalid-email-warning" style="color: red; display: none;">Not an email address</div> 

$(function() { 
    setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000) 
     $('#submit-email').click(function() { 
      var emailAddress = $('#email-to-submit').val(); 
       if (validateEmail(emailAddress)){ 
        $('#email-to-submit').val(''); 
        $('#email-submit-form'); 
        $.ajax({ 
         type: "POST", 
         url: '/submitEmailAddress', 
         dataType: 'json', 
         data: JSON.stringify({'email': emailAddress}) 
        }); 
       } else { 
        $('#invalid-email-warning').show(); 
        } 
      $('#email-submit-form').show(); 
      setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000) 
    }) 
}); 

Answer 1

您可以使用jQuery delay()

$('#email-submit-form').fadeIn().delay(5000).fadeOut(); 

Answer 2

试试这个..

$('#email-submit-form').fadeIn('slow', function() { 
     $(this).delay(5000).fadeOut('slow'); 
     }); 

Answer 3

写if(){条件或AJAX success

内的超时逻辑

$.ajax({ 
    type: "POST", 
    url: '/submitEmailAddress', 
    dataType: 'json', 
    data: JSON.stringify({ 
     'email': emailAddress 
    }), 
    success: function (response) { 
     $('#email-submit-form').show(); 
     setTimeout(function() { 
      $("#email-submit-form").fadeOut(1500); 
     }, 5000) 
    } 
}); 

此外，

if (validateEmail(emailAddress)){ 
    $('#email-to-submit').val(''); 
    $('#email-submit-form'); //this line 

第三行不执行任何操作，将其删除。