Joomla+встроенный mootools - fade in/out эффект?
 

Доброго времени.
Вразумите пожалуйста, как создавать эффекты с помощью mootools v1.12, который встроен в joomla 1.5. Ни как не удается вникнуть в суть. Задача:

1. Появление объекта: прозрачность 0 -> 1, высота 0 -> родная высота объекта.
2. Через 1 сек. объект исчезает: прозрачность 1 -> 0, высота родная высота объекта -> 0, как только объект исчез, удалить его.

Вот, что удалось релизовать, вот только суть так и не понял:

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

<script type="text/javascript">
function msg( mdg_id, dell_all ){
	dell_all = dell_all || 0;
	var msg = document.getElementById( 'apwin_msg_' + mdg_id ).cloneNode(true);
	msg.style.display = 'block';
	msg.id= '';
	var msgs = document.getElementById( 'apwin_msg' );
	if ( dell_all )  msgs.innerHTML = '';
	document.getElementById( 'apwin_msg' ).insertBefore( msg,  msgs.firstChild );
	
	while (  msgs.childNodes.length > 3 ) msgs.removeChild( msgs.lastChild );
	
	setTimeout( function(){
		var myTransition = new Fx.Transition(Fx.Transitions.Cubic, 10);
		msg.effect('opacity', {
			transition: myTransition.easeOut
		}).start(1, 0);
		
		//msgs.removeChild( msgs.lastChild );
	}, 1000 );
}
</script>

<div id="apwin_msg" style="border:1px solid #000; width: 200px; height: 60px; margin: 10px 0 10px 0; padding: 5px;"></div>
<button onclick="msg('ok'); return false;">Add ok</button>
<button onclick="msg('er'); return false;">Add er</button>
<button onclick="msg('no'); return false;">Add no</button>

<div style="display:none">
	<div id="apwin_msg_ok">ok</div>
	<div id="apwin_msg_er">er</div>
	<div id="apwin_msg_no">no</div>
</div>

Во вложении файл примера.

Если не сложно, пожалуйста, можно простенький пример fade эффекта..

Эффекты на 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>