Animate message using jquery form plugin

Question

I am having a problem using the jquery Form Plugin. I have a form that is setup that I would like to animate the errors/success when a user submits incorrect information or gives the user a succes message when then enter correct information. However my problem is twofold. The message that displays on the same page only works in firefox with the jquery that I currently using. What would cause this?

I would like the different messages to slide into view when being displayed but right now they just pop into view. How do I make it animate or rather slide into view? The page in question is 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

Try doing this instead, the normal show()/hide() methods can also do animation:

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

See jQuery show( speed, [callback] )

The doc says:

Show all matched elements using a graceful animation and firing an optional callback after completion.

Also, you are using animate() incorrectly. For it to work, at the very least you need to pass it some CSS properties as a set of options. See the docs:

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

EDIT: that is where I meant you use my suggestion:

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

Answer 2

Yeah, your problem is you utilizing the animation methods incorrectly. I would urge you to read the section on the 'animate' function in the jquery api docs. Karim's suggestion is probably exactly what you want, but, if you want more elaborate animation than a slidedown-ish kind of thing, then you can either use 'fadeIn' or 'animation' methods.

For instance...

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

Would effectively do the same thing as:

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

Which will fade an item in over the period of a half a second. It's not so useful to spend time using the animate method in this case. It would be useful in this case, for instance:

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

This will stretch the message to 100% and show it by making it's height 30px and opacity 100% all over the course of 500 milliseconds.

In order for 'height' and 'width' animations to work, the element generally has to be a block element.

Sorry for the overkill elaboration... I'm a bit bored at the moment...

Answer 3

is this supposed to be this:

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

because this causes the form to go back to the problem I was having in the first place. Whereby once you submit you were taken to another page. Now without it then form does as expect only it pops into view instead of gracefully coming into view.

Not sure how I am supposed to add comments but:

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

and

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

do not appear to do anything the message still just pops into view.

@Karim79 I did see your edit

Say this is still not working. What am I still doing wrong