javascript - 淡入淡出联系表 "Thank You"Div

Question

我有一个使用 javascript 和 contact.php 代码的电子邮件提交表单

这是 JavaScript

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();
function sendemail() {
    var email = document.contactform.email.value;
    document.contactform.send.disabled=true; 
    http.open('get', '/contact.php?email='+email+'&action=send');
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

这是 contact.php 的一部分

<?php

$to = ""; //This is the email address you want to send the email to
$subject_prefix = ""; //Use this if you want to have a prefix before the subject

if(!isset($_GET['action']))

{
die("You must not access this page directly!"); //Just to stop people from visiting contact.php normally
}

$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_GET['email']); //The senders subject
$email = ""; //The senders email address

mail($to,$subject,$message,"From: ".$email.""); //a very simple send

echo 'contactarea|<div id="thanks">thank you</div>'; //now lets update the "contactarea" div on the contact.html page. The contactarea| tell's the javascript which div to update.
?>

和 HTML

<div id="contactarea">
<form name="contactform" id="contactform">
<input class ="email" type="text" name="email" id="inputbox" value="e-mail"
onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" value="sign up" name="send" onclick="sendemail(); return false; " class="signup" >
</form>
</div>

我试图在 5 秒后淡出“谢谢”，但遇到了一些麻烦。

如果我将其设置为在单击提交按钮时淡出，它似乎不起作用，因为在单击按钮之前它不存在。

如果我将其设置为加载时淡入淡出，则仅当在淡入淡出时间之前单击按钮时它才有效

是否有一种方法可以不在页面加载时淡出，而是在 div 本身加载时淡出？

Answer 1

尝试

回声'contactarea|<div id="thanks">thank you</div>';

至

echo '
contactarea|<div id="thanks">thank you</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    setTimeout(function(){
        $("#thanks").fadeOut();
    },5000);
});
</script>
';