使用 jQuery 动画插入元素答案

【问题标题】：Animating inserted elements with jQuery使用 jQuery 动画插入元素
【发布时间】：2013-09-01 20:48:19
【问题描述】：

如何在此处为工具提示添加动画（进出动画）：

$('.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>

【问题讨论】：

我们能否获取 HTML 或一个实时示例来查看它当前的行为？到目前为止，您尝试过对其进行动画处理吗？
这是我从中获取代码的页面的链接。 hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial 我只需要在错误消息中添加一个（进出）动画，并为成功 div 添加一个动画。上面是运行它的 JS。
我要动画：(1-FIRST): $(this).parent().append('
请输入你的'+labelText+'！
'); (2-SECOND): $(this).parent().append('
对不起！你输入了一个无效的' +labelText+'.
'); (3-THIRD): $(this).before('
谢谢！您的电子邮件已提交。Huzzah！
');
@Boris，我不确定发布所有这些代码是否对您有帮助。我宁愿看到所有这些都被提炼成基本位，即需要为插入的节点设置动画，该节点是从 HTML 字符串生成的。这将使该问题对其他人更有用（更广泛的用例）并且更容易回答。不过，请查看答案。

标签： javascript jquery animation

【解决方案1】：

要为附加元素设置动画，您可以简单地反过来。

代替：

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.

【讨论】：

【解决方案2】：

为要附加的 div 设置动画的最简单方法是将它们设置为 0 宽度或高度，或 display:none，然后在附加它们后进行动画处理。一个简单的例子在这里 - http://jsfiddle.net/Bquyw/1

类似于：

$('div').append('<div class="error">Please enter your !</div>');
$('.error').animate({'width':'200px'},1000,'easeOutBounce')

你可能也对这个 codePen 感兴趣 - http://codepen.io/lukeocom/pen/Dewdo

【讨论】：