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

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

1 个答案: