Edit in JSFiddle

function addAlert(error_text,error_class,remove_timeout) {
       
    remove_timeout = remove_timeout ? remove_timeout : 0;
    
    var li = $('<li/>', {
        'class': error_class
    }).bind('click', function() {
        $(this).slideUp('fast',function() {
             $(this).remove();   
        });
    }).append($('<div/>',{
        'text': error_text   
    })).appendTo('#notifications').slideDown('fast',function() {
        $(this).find('div').animate({
            'opacity': 1 
        },500);  
    });
    
    if(remove_timeout>0) {
        setTimeout(function() {
            li.slideUp('fast',function() {
                  $(this).remove();  
            });   
        },remove_timeout)
    }
}

$('#addNote').bind('click', function() {
    addAlert('Foo');
    return false;
});

$('#addNote1').bind('click', function() {
    addAlert('Bar','warning');
    return false;
});

$('#addNote2').bind('click', function() {
    addAlert('Baz',null,1000);
    return false;
});

<ul id='notifications'>
    
</ul>

<a id="addNote" href='#'>Add standard message</a><br />
<a id="addNote1" href='#'>Add message with class</a><br />
<a id="addNote2" href='#'>Add message with timeout</a><br />

body { font-size: 13px; }

#notifications li {
    padding: 5px;   
    border: 1px solid #CCC;
    background-color: #F6F6F6; 
    margin-bottom: 5px;
    display: none;
}
#notifications li:hover {
    background-color: #F1F1F1;
     cursor: pointer;   
}

#notifications li div {
    opacity: 0;
}
#notifications li.warning {
     color: #CD0A0A;   
}