setTimeout函数淡化formOut形式和fadeIn成功消息并且比fadeOut成功消息和fadeIn形式

时间:2015-08-13 08:32:11

标签: javascript jquery html ajax forms

我的联系表格有一个小问题。当前表单提交并显示确认消息,我想更改此消息,以便表单淡出,成功消息淡入,大约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" />&nbsp;Please Wait...</div>
			</td>
		</tr>
	</table>
	
</form>
<p>&nbsp</p>

</div>
&#13;
&#13;
&#13;

我的JS代码如下 -

&#13;
&#13;
$(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;
&#13;
&#13;

任何人都建议我如何将setTimeout函数添加到此代码中以淡化表单并淡化成功消息而不是fadeOut成功消息并再次淡入表单。

感谢您的帮助。

0 个答案:

没有答案