我的联系表格有一个小问题。当前表单提交并显示确认消息,我想更改此消息,以便表单淡出,成功消息淡入,大约4秒后成功消息淡出,表单淡入。
我的表单代码是
<div class="contacts-form">
<form action="" method="post" id="contact">
<p class="confirm dn">Thank you, your message has been sent successfully <br/> We will reply back to you within 24hrs.</p>
<p class="error dn">Please correct the errors and re-submit the form!</p>
<table cellpadding="0" cellspacing="0" border="0" class="tbl_contact">
<tr>
<th class="name"><label for="name"></label></th>
</tr>
<tr>
<td>
<input type="text" name="name" id="name" class="last-item" placeholder="Full Name" /><span class="require">*</span>
</td>
</tr>
<tr>
<th class="email"><label for="email"></label></th>
</tr>
<tr>
<td>
<input type="text" name="email" id="email" class="last-item" placeholder="Email" /><span class="require">*</span>
</td>
</tr>
<tr>
<th class="web"><label for="web"></label></th>
</tr>
<tr>
<td>
<input type="text" name="web" id="web" class="fld" value="" placeholder="Web Site" />
</td>
</tr>
<tr>
<th class="subj"><label for="subj"></label></th>
</tr>
<tr>
<td>
<input type="text" name="subj" id="subj" class="fld" class="last-item" placeholder="Subject"/><span class="require">*</span>
</td>
</tr>
<tr>
<th class="message"><label for="message"></label></th>
</tr>
<tr>
<td>
<textarea name="message" id="message" placeholder="Your Message..."></textarea><span class="require">*</span>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Send" class="no-bottom-margin" />
<div id="loader" class="dn"><img src="../images/ajax-loader.gif" width="16" height="16" alt="Please wait" /> Please Wait...</div>
</td>
</tr>
</table>
</form>
<p> </p>
</div>
&#13;
我的JS代码如下 -
$(function() {
if ($("#contact").length > 0) {
$("#contact").submit(function() {
$('#button').hide();
$('#loader').show();
$("#contact .warn").remove();
var fields = $(this).serializeArray();
$.ajax({
type : 'POST',
url : '../inc/contact.php',
data : fields,
dataType : 'json',
success: function(data) {
$('#button').show();
$('#loader').hide();
if (data.error) {
$('.error').fadeIn(300);
jQuery.each(data.fields, function(k, v) {
$('.' + k).append('<span class="warn">' + v + '</span>');
$('.warn').fadeIn(500);
});
});
$('.error').fadeOut(3000);
});
} else {
$('.error').hide();
$(".confirm").html(data.message).fadeIn(500);
$('.confirm').fadeOut(8000);
/*$('.confirm').fadeIn(300, function() {
var d = setTimeout(function() {
$('.confirm').fadeOut(400);
}, 2000);
}); */
$('#name, #email, #web, #subj, #message').val('');
}
}
});
return false;
});
}
});
&#13;
任何人都建议我如何将setTimeout函数添加到此代码中以淡化表单并淡化成功消息而不是fadeOut成功消息并再次淡入表单。
感谢您的帮助。