jquery validate：为错误消息添加淡入/淡出效果

Question

我想为 jquery 验证上显示的错误消息添加淡入/淡出效果。有什么方法可以做到这一点？我可以在它们上使用 div 并单独处理它们吗？插件有这个效果吗？

我使用此代码来放置错误消息（我需要它来正确放置）：

$("#commentForm2").validate({


        errorElement: "div",

        errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
        }

    });

Answer 1

我意识到这是一个非常古老的问题，但我在任何地方都找不到这个答案。这是我最终使用的解决方案： http://jsfiddle.net/MkARD/

这个想法是覆盖处理显示和隐藏错误的函数使用 SlideDown 和 SlideOut 而不是 Show 和 Hide。这也可以应用于淡入和淡出。代码中似乎已经支持覆盖这些函数，但没有记录。

此外，我选择在输入集中时清除错误。如果您希望在不同的事件上清除错误，则必须找到依赖于哪个函数并在那里进行更改。

希望这对某人有帮助！这些是我重写的函数：

    onfocusin: function( element, event ) {
        this.lastActive = element;

        // hide error label and remove error class on focus if enabled
        if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
            if ( this.settings.unhighlight ) {
                this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
            }
            this.addWrapper(this.errorsFor(element)).slideUp();
        }
    },
    showErrors: function() {
        var i, elements;
        for ( i = 0; this.errorList[i]; i++ ) {
            var error = this.errorList[i];
            if ( this.settings.highlight ) {
                this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
            }
            this.showLabel( error.element, error.message );
        }
        if ( this.errorList.length ) {
            this.toShow = this.toShow.add( this.containers );
        }
        if ( this.settings.success ) {
            for ( i = 0; this.successList[i]; i++ ) {
                this.showLabel( this.successList[i] );
            }
        }
        if ( this.settings.unhighlight ) {
            for ( i = 0, elements = this.validElements(); elements[i]; i++ ) {
                this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
            }
        }
        this.toHide = this.toHide.not( this.toShow );
        this.hideErrors();
        this.addWrapper( this.toShow ).slideDown();
    }