[`p r o x y]

Эффекты на Mootools v1.12 для Joomla 1.5
Вот такой вот вышел результат:

JavaScript

<script type="text/javascript" src="mootools_from_joomla1.5.js"></script>

<script type="text/javascript">
function msg( type, delall, timeout ){
	delall = delall||0; timeout = timeout||2000;
	
	var msgs = document.getElementById( 'msgs' );
	if ( delall )  msgs.innerHTML = '';
	
	var msg = document.getElementById( 'msg_' + type ).cloneNode(true);
	msg.style.display = 'block';
	msg.id = '';
	msgs.insertBefore( msg,  msgs.firstChild );
	
	fx_show_hight( msg );
	if (  msgs.childNodes.length > 3 ){
		if ( msgs.lastChild != null )
			fx_hide_hight_del( msgs.lastChild, msgs, {s:400} );
	}
	setTimeout( function(){ fx_hide_hight_del( msg, msgs, {s:400} );	}, timeout );
}

function fx_show_hight( o, p ){
	p=p||{}; p.s=p.s||500; p.ms=p.ms||'real'; p.me=p.me||0; p.os=p.os||0; p.oe=p.oe||1;
	
	if ( p.ms == 'real' ){
		o.style.position = 'absolute';
		o.style.left = '-3000px';
		o.style.top = '-3000px';
		o.style.display = 'block';
		p.ms = -o.offsetHeight;
		o.style.position = 'static';
		o.style.display = 'none';
	}
	var fx = new Fx.Styles( o, {duration:p.s} );
	
	if ( p.hs != 'no' ) fx.set({ marginTop:p.ms });
	if ( p.os != 'no' ) fx.set({ opacity:p.os });
	o.style.display = 'block';
	
	fx.start({ marginTop:p.me, opacity:p.oe });
}

function fx_hide_hight_del( o, op, p ){
	p=p||{}; p.s=p.s||500; p.ms=p.hs||'no'; p.me=p.he||5; p.os=p.os||'no'; p.oe=p.oe||0;
	
	if ( o.style.opacity != 1 ) return;
	var fx = new Fx.Styles( o, {duration:p.s, onComplete:function(){
		if ( o == null ) return;
		op.removeChild( o );
	}});
	
	if ( p.ms != 'no' ) fx.set({ marginTop:0 });
	if ( p.os != 'no' ) fx.set({ opacity:p.os });
	
	fx.start({ marginTop:p.me, opacity:p.oe });
}
</script>

CSS

<style type="text/css">
.msgs{
	width: 400px;
	height: 100px;
	margin: 10px 0 10px 0;
	padding: 5px;
	overflow: auto;
	border: 1px solid #000;
}

.msg_ok, .msg_er, .msg_no{
	padding: 3px;
	margin-bottom: 4px;
}
.msg_ok{
	border-top: 1px solid #339707;
	border-bottom: 1px solid #339707;
	background-color: #dbffd4;
}
.msg_er{
	border-top: 1px solid #970707;
	border-bottom: 1px solid #970707;
	background-color: #ffd5d4;
}
.msg_no{
	border-top: 1px solid #b89a0c;
	border-bottom: 1px solid #b89a0c;
	background-color: #fff7d4;
}
</style>

HTML

<button onclick="msg('ok'); return false;">Show msg ok</button>
<button onclick="msg('er'); return false;">Show msg er</button>
<button onclick="msg('no'); return false;">Show msg no</button>
<br>

<div id="msgs" class="msgs"></div>
<div style="display:none">
	<div id="msg_ok" class="msg_ok">ok</div>
	<div id="msg_er" class="msg_er">er</div>
	<div id="msg_no" class="msg_no">no</div>
</div>