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

第三行什么都不做，删除它。

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

3 个答案: