Messaggio animato tramite plug in modulo jquery

Question

Ho riscontrato un problema con il plug-in jquery. Ho un modulo che è configurato che vorrei animare gli errori/successo quando un utente invia informazioni errate o dà all'utente un messaggio di successo quando poi inserire le informazioni corrette. Tuttavia il mio problema è duplice. Il messaggio che viene visualizzato sulla stessa pagina funziona solo in firefox con il jquery attualmente in uso. Cosa potrebbe causare questo?

Desidero che i diversi messaggi vengano visualizzati durante la visualizzazione ma in questo momento vengono visualizzati. Come faccio a renderlo animato o piuttosto a scorrere in vista? La pagina in questione è here

$(document).ready(function() { 
var options = { 
target:  '#alert', 
}; 
$('#myForm').ajaxForm(options); 
}); 

$.fn.clearForm = function() { 
    return this.each(function() { 
    var type = this.type, tag = this.tagName.toLowerCase(); 
    if (tag == 'form') 
     return $(':input',this).clearForm(); 
    if (type == 'text' || type == 'password' || tag == 'textarea') 
     this.value = ''; 
    else if (type == 'checkbox' || type == 'radio') 
     this.checked = false; 
    else if (tag == 'select') 
     this.selectedIndex = -1; 
    }); 
}; 
/*this is my addition to getting the slide into view, but does not work */ 
$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show().animate("slow"); 
}); 


/*$(function() { 
     $('.message').('slow').show('slow'); 
     $('.message').('slow').show('slow').animate({opacit:1.0}, 4000).hide('slow'); 
    $('input').clearForm() 
}); */ 

Answer 1

Prova a fare questo, invece, lo spettacolo normale()/hide() metodi possono anche fare animazione:

$('.message').show("slow"); 

See jQuery show(speed, [callback])

Il dottore dice :

Visualizza tutti gli elementi abbinati utilizzando un'animazione graziosa e sparare un n richiamata opzionale dopo il completamento.

Inoltre, si utilizza animate() in modo errato. Perché funzioni, per lo meno è necessario passarle alcune proprietà CSS come un insieme di opzioni. Vedere la documentazione:

http://docs.jquery.com/Effects/animate

EDIT: è lì che volevo dire di usare il mio suggerimento:

$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show("slow"); 
}); 

Answer 2

Sì, il problema è che si utilizzano i metodi di animazione in modo non corretto. Vi esorto a leggere la sezione sulla funzione "Animate" nello jquery api docs. Il suggerimento di Karim è probabilmente esattamente quello che vuoi, ma, se vuoi un'animazione più elaborata di un tipo di cosa slidedown, puoi utilizzare i metodi "fadeIn" o "animation".

Per esempio ...

$('.message').animate({opacity:100},500); 

potrebbe effettivamente fare la stessa cosa come:

$('.message').fadeIn(500); 

che svanirà un elemento nel corso del periodo di un mezzo secondo. In questo caso non è molto utile passare il tempo con il metodo animate. Sarebbe utile in questo caso, ad esempio:

$('.message').animate({opacity:100,width:'100%',height:30},500); 

Questo tratto il messaggio al 100% e mostrare facendo è altezza 30px e l'opacità 100% tutto il corso di 500 millisecondi.

Per far funzionare le animazioni di 'altezza' e 'larghezza', l'elemento deve essere generalmente un elemento di blocco.

Ci scusiamo per l'elaborazione eccessivo ... Sono un po 'annoiato in questo momento ...