使文本输入在输入验证后淡出，然后淡入原始占位符文本

Question

我正在使用单个电子邮件输入表单设置一个启动页面。

现在，当用户输入电子邮件时，表单会迅速淡出，感谢消息会淡入以替换它。 我想做的是让"谢谢"在几秒钟后淡出，然后让表单淡入。

我可以让它发生，只是表单与最初输入的电子邮件一起返回，我花了很长时间试图找出一种用原始占位符文本替换电子邮件地址的方法。

这是来自：

<form action="" method="post" id="sendEmail">
    <div class="forms">
        <div class="buttons" id="buttons">
            <button type="submit" id="submit"></button>
            <input type="hidden" name="submitted" id="submitted" value="true"
            />
        </div>
        <div class="text_box" id="text_box">
            <input type="text" name="emailTo" id="emailTo" value="   Your Email Here"
            onfocus="this.value=''" />
        </div>
    </div>
</form>
<div class="answerBox">
    <div style="display:none;" id="thanks">Thank you!</div>
</div>

这是我用来处理成功验证后淡入、淡出的 Jquery：

if (hasError == false) {
    $.post("adduser1.php", {
        emailTo: emailToVal
    }, function (data) {
        $(".buttons").fadeOut(200);
        $(".text_box").fadeOut(200, function () {
            $("#thanks").fadeIn(200)
        });
    });
}
return false;

我试过这个：

$.post("adduser1.php", {
    emailTo: emailToVal
}, function (data) {
    $(".buttons").fadeOut(200);
    $(".text_box").fadeOut(200, function () {
        $("#emailTo").text("   Your Email Here", function () {
            $("#thanks").fadeIn(200))
        });

但它不起作用。

有什么想法吗？

Answer 1

首先，#emailTo不受.text的影响，因为它是一个<input>元素。将.text替换为.val：

$("#emailTo").val("   Your Email Here")

其次，您尝试将#thanks.fadeIn绑定到 .text（或 .val）更改的末尾。由于这是一个即时操作，所以这是不必要的（我认为也不是正确的jQuery语法）。只需将$("#thanks").fadeIn(200)放在下一行：

function (data) {
  $(".buttons").fadeOut(200);
  $(".text_box").fadeOut(200, function () {
    $("#emailTo").val("   Your Email Here")
    $("#thanks").fadeIn(200))
  });
}

工作示例：jsFiddle