Create a notification popup animated in a specific way?

Question

How would I go about making the following animation for my form submissions?

(I figured instead of typing it, I would create a visual.)

Answer 1

I've thrown together a proof of concept for you, using jsFiddle:

http://jsfiddle.net/kAhXd/1/ (animation now resets, click the submit button)

You'll need to take a good look at the CSS, but the important thing to note is the <form> element's position is set to relative, and the message element's position is set to absolute. This is to ensure that the message element's position is always relative to the form element.

HTML

<form><div id="message"></div>
    <input> Label 1<br/><br/>
    <input> Label 2<br/><br>
    <textarea>Larger text area</textarea><br/><br/>
    <textarea>And another</textarea><br/><br/>
    <button type="button">Submit</button>
</form>​

CSS

form { position:relative; width:500px; }
#message { 
    position:absolute;
    display:none;
    height:100px;
    width:200px;
    border: 1px gray solid;
    background-color:lime;
    font-size: 1.4em;
    line-height:100px;
    text-align:center;
    left: 150px;
    bottom:100px; 
    border-radius: 5px;
}    ​

JavaScript

$("button").click(function () {
    var msg = $("#message");
    msg[0].style.cssText = "";
    msg.text("Item saved!");
    msg.fadeIn('slow').animate({
        "bottom": "3px",
        "height": "17px",
        "font-size": "1em",
        "left": "80px",
        "line-height": "17px",
        "width": "100px"
    });
});​

Answer 2

Here's Andy's idea refined with horizontal centering.

HTML:

<form><div id="message"></div>
   <input> Label 1<br/><br/>
   <input> Label 2<br/><br>
   <textarea>Larger text area</textarea><br/><br/>
   <textarea>And another</textarea><br/><br/>
<button type="button">Submit</button>

​

CSS:

form { 
   position:relative; 
   width:500px;}
#message { 
   position:absolute;
   display:none;
   height:100px;
   width:200px;
   border: 1px gray solid;
   background-color:lime;
   font-size: 1.4em;
   line-height:100px;
   text-align:center;
   border-radius: 5px;
   bottom: 100px;}

​

Centering function:

(function($) {
$.fn.extend({
    center: function() {
        return this.each(function() {
            var left = ($(window).width() - $(this).outerWidth()) / 2;
            $(this).css({
                position: 'absolute',
                margin: 0,
                left: (left > 0 ? left : 0) + 'px'
            });
        });
    }
});})(jQuery);

Call center:

$("#message").center();

Click function:

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​

http://jsfiddle.net/2qJfF/