Показать сообщение отдельно
  #1 (permalink)  
Старый 03.06.2010, 20:34
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

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 эффекта..
Вложения:
Тип файла: zip test1.zip (67.8 Кб, 1 просмотров)

Последний раз редактировалось `p r o x y, 03.06.2010 в 20:38.
Ответить с цитированием