jquery validate: aggiunta di un effetto di dissolvenza in entrata / uscita ai messaggi di errore

Mi piacerebbe aggiungere un effetto di fade-in / fade-out ai messaggi di errore visualizzati sulla convalida di jquery. Qual è il modo di fare questo? Potrei usare un div e su di essi e lavorarli separatamente? Il plugin include questo effetto?

Sto usando questo codice per inserire messaggi di errore (ne ho bisogno per un corretto posizionamento):

$("#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); } }); 

Mi rendo conto che questa è una domanda super vecchia, ma non ho trovato questa risposta da nessuna parte. Questa è stata la soluzione che ho finito usando: http://jsfiddle.net/MkARD/

L’idea era di sovrascrivere le funzioni che gestiscono la visualizzazione e l’occultamento degli errori per usare SlideDown e SlideOut invece di Mostra e Nascondi. Questo potrebbe essere applicato anche a FadeIn e FadeOut. La sovrascrittura di queste funzioni sembra essere già supportata nel codice, ma non è documentata.

Inoltre, ho scelto di cancellare i miei errori quando un input è focalizzato. Se vuoi che i tuoi errori si cancellino su un evento diverso, dovrai trovare la funzione che fa affidamento e apportare le modifiche lì.

Speriamo che questo aiuti qualcuno! Queste sono le funzioni che ho sovrascritto:

  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(); }