單擊按鈕顯示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 

第三行不執行任何操作，將其刪除。