使用jQuery设置插入元素的动画
Animating inserted elements with jQuery
如何在此处为工具提示添加动画(包括输入和输出):
$('.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;
}
}
}
此外,一旦表单提交,我如何将动画添加到弹出的横幅中?请注意,该表单有一个fadeOut动画。我也想用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>');
do:
$('<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()
。
演示。
为要附加的div设置动画的最简单方法是将它们的宽度或高度设置为0,或者显示为none,然后在附加它们后设置动画。这里有一个简单的例子——http://jsfiddle.net/Bquyw/1
类似于:
$('div').append('<div class="error">Please enter your !</div>');
$('.error').animate({'width':'200px'},1000,'easeOutBounce')
你可能也对这个代码感兴趣http://codepen.io/lukeocom/pen/Dewdo
相关文章:
- 我需要在javascript if语句中使用jquery来动画元素的颜色
- 添加/删除类和动画元素的不同方法
- 悬停时动画元素的 JavaScript 问题
- 动画元素不会在悬停时更改样式
- 在jquery中使用索引动画元素
- 应该为“容器”元素和“动画”元素分配什么位置属性?HTML CSS JavaScript.
- 动画元素角度不消失
- JS获取动画元素的当前位置
- jQuery幻灯片和停止问题:动画元素随着鼠标的快速移动而冻结
- 在视图中检测动画元素
- 鼠标悬停和鼠标移出不触发动画元素
- jQuery动画元素和隐藏
- 当你向下滚动然后向上滚动时如何动画元素
- 当动画元素接触鼠标时触发mouseenter
- 使用滑动回调和Jquery动画元素在幻灯片
- 我如何动画元素存储在一个数组?除了我徘徊在上面的那个
- 引导工具提示跟随动画元素
- 点击动画元素
- 使用jQuery动画元素并调用stop()
- 如何显示动画元素时,它是在查看区域