просто так ... почти на одном таймере ... )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">#chat{position:absolute;bottom:0;left:0;right:0}
#chat #chat-box{width:92%;font-size:11px;line-height:14px;margin:0 auto 40px}
#chat #chat-box .line{opacity:1;transition:all 2s;word-wrap:break-word;text-shadow:1px 1px 1px #333;padding:2px 5px}
#chat #chat-box .line:before{content:attr(data-name);color:#f00;margin-right:5px;font-weight:bold}
#chat #cmd{position:absolute;left:0;right:0;bottom:0;width:92%;margin:0 auto 5px;font-size:14px;line-height:23px;outline:none;border:3px solid #099;border-radius:3px}
</style>
</head>
<body>
<div id="chat">
<div id="chat-box"></div>
<input id="cmd" type="text" maxlength="150">
</div>
<script>
var cmd = document.getElementById("cmd"),
chatBox = document.getElementById("chat-box"),
lines = [],
line, timer, time;
cmd.onkeyup = function (a) {
a = a || window.event;
13 === a.keyCode && cmd.value && (window.clearTimeout(timer),
5 == lines.length && (line = lines.pop()[0],
chatBox.removeChild(line)),
line = document.createElement("div"),
time = (new Date).getTime() + 5E3,
chatBox.appendChild(line),
line.setAttribute("data-name", "User: "),
line.innerHTML = cmd.value,
line.className = "line",
lines.unshift([line, time]),
cmd.value = "",
removeInit())
};
var removeInit = function () {
var a = lines.length - 1;
0 > a || (time = lines[a][1] - (new Date).getTime(), 0 > time && (time = 0), timer = window.setTimeout(removeLine, time))
}, removeLine = function () {
if (line = lines.pop()[0]) line.style.opacity = 0, window.setTimeout(function () {
line.parentNode && line.parentNode.removeChild(line)
}, 2E3), removeInit()
};
</script>
</body>
</html>