如何为此处的工具提示添加动画(输入和输出):
$('.requiredField').each(function () {
if ($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<div class="error">Please enter your ' + labelText + '!</div>');
$(this).addClass('inputError');
hasError = true;
} else if ($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/;
if (!emailReg.test($.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<div class="error">Sorry! You\'ve entered an invalid ' + labelText + '.</div>');
$(this).addClass('inputError');
hasError = true;
}
}
}
此外,提交表单后,如何向弹出的横幅添加动画?请注意,该表单具有淡出动画。我还想使用 class=info
为该段落添加动画:
var formInput = $(this).serialize();
$.post($(this).attr('action'), formInput, function (data) {
$('form#contact-us').fadeOut("fast", function () {
$(this).before('<p class="info">Thanks! Your email has been submitted. Huzzah!</p>');
})
});
脚本:http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$('form#contact-us').submit(function() {
$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<div class="error">Please enter your '+labelText+'!</div>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/;
if(!emailReg.test($.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<div class="error">Sorry! You\'ve entered an invalid '+labelText+'.</div>');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contact-us').fadeOut("fast", function() {
$(this).before('<p class="info">Thanks! Your email has been submitted. Huzzah!</p>');
});
});
}
return false;
});
});
//-->!]]>
</script>
最佳答案
为了对附加元素进行动画处理,您只需采取相反的方法即可。
而不是:
someElement.append('<div>myElement</div>');
做:
$('<div>myElement</div>').hide().appendTo(someElement).show('slow');
如果您仍然想使用 append()
或 before()
,您可以将新元素分配给变量,如下所示:
原文:
$(this).before('<p class="info">Thanks! ... Huzzah!</p>');
修改:
var el = $('<p class="info">Thanks! ... Huzzah!</p>').hide();
$(this).before(el);
el.show('slow');
此方法应该适用于您的所有实例。
您可以将 show()
更改为您想要的效果,例如 fadeIn()
。
Demo .
关于javascript - 使用 jQuery 对插入的元素进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18562781/