message Animer utilisant plugin forme jquery

Question

J'ai un problème en utilisant le formulaire jquery Plugin. J'ai une forme qui est la configuration que je voudrais animer les erreurs/succès lorsqu'un utilisateur envoie des informations incorrectes ou donne à l'utilisateur un message quand puis entrez succés informations correctes. Cependant, mon problème est double. Le message qui s'affiche sur la même page ne fonctionne que dans Firefox avec la jquery que j'utilise actuellement. Qu'est-ce qui causerait ça?

Je voudrais que les différents messages à glisser dans la vue lorsqu'ils sont affichés mais maintenant ils sautent juste en vue. Comment puis-je l'animer ou plutôt le faire glisser dans la vue? La page en question est 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

Essayez de faire cela à la place, les méthodes montrent la normale()/hide() peut aussi faire de l'animation:

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

Voir jQuery show(speed, [callback])

Le doc dit :

Afficher tous les éléments correspondants à l'aide d'une animation gracieuse et d'un n rappel facultatif après l'achèvement.

De même, vous utilisez incorrectement animate(). Pour que cela fonctionne, à tout le moins, vous devez lui transmettre certaines propriétés CSS comme un ensemble d'options. Voir les docs:

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

EDIT: c'est là que je voulais dire que vous utilisez ma suggestion:

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

Answer 2

Oui, votre problème est que vous correctement en utilisant les méthodes d'animation. Je vous invite à lire la section sur la fonction « Animer » dans le jquery api docs. La suggestion de Karim est probablement exactement ce que vous voulez, mais si vous voulez une animation plus élaborée qu'une sorte de chose slideDown-ish, vous pouvez utiliser des méthodes « fadeIn » ou « animation ».

Par exemple ...

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

ferait effectivement la même chose que:

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

qui va disparaître un élément sur la période d'une demi-seconde. Ce n'est pas utile de passer du temps en utilisant la méthode animate dans ce cas. Il serait utile dans ce cas, par exemple:

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

Cela étirer le message à 100% et le montrer en faisant son 30px de hauteur et une opacité de 100% tout au long de 500 millisecondes. Pour que les animations 'height' et 'width' fonctionnent, l'élément doit généralement être un élément de bloc.

Désolé pour l'élaboration surpuissance ... Je suis un peu ennuyé au moment ...