how to stick an element on page (position: fixed) after it has been displayed?

Question

I'm developing a growl like notifications for my site, currently it's like this:

HTML:

<div id="growls"></div>

CSS:

#growls {
position: fixed;
right: 20px;
bottom: 20px;
}

.growl {
display: none;
}

JS:

function growl(message) {
    if (growls < 5) {
        growls = growls + 1;
        $('<div class="growl short block">' + message + '</div>').prependTo('#growls').fadeIn('slow').delay(2000).fadeOut('slow', function() { growls = growls - 1 });
        }
    }

Live example

It basically put new 'growl' on top of existing ones, problem is, when old ones disappear, new 'growls' suddenly collapse down, very annoying if you are reading the message.

I'm thinking about making the new growl div position fixed after it display, but it's not very clean (tons of adding and subtracting from elements offset)

Is there any better way to do this?

Answer 1

I know it doesn't answer the exact question asked, but my suggestion would be to use slideUp to hide the elements instead of fadeOut. This will give a nice fluid movement for the other elements to move into their new position. This can easily be followed by the readers eye and won't cause the elements to jump.

Or for an even nicer look, use animate and animate the height and the opacity:

http://jsbin.com/exonal/4

$('<div class="growl short block">' + message + '</div>').prependTo('#growls')
    .fadeIn('slow').delay(2000)
    .animate({opacity: 0, height:"hide"},'slow', function() { growls = growls - 1 });