0

ここでツールチップのアニメーション (インとアウトの両方) を追加するにはどうすればよいですか:

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

2 に答える 2

2

追加された要素をアニメーション化するには、単純にその逆を行うことができます。

それ以外の：

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()。

デモ。

于 2013-09-02T00:18:03.970 に答える