Пример 1.

Постепенно исчезает | Постепенно появляется

Контент

js-код

window.addEvent('domready', function() {
	$('clickMe1').addEvent('click', function(e) {
		$('fadeDiv').tween('opacity', 0);
		e.stop();
	});
	$('clickMe2').addEvent('click', function(e) {
		$('fadeDiv').tween('opacity', 1);
		e.stop();
	});
});

html-код

<a href="#" id="clickMe1">Постепенно исчезает</a> 
| <a href="#" id="clickMe2">Постепенно появляется</a>
<div id="fadeDiv">Контент</div>

Пример 2.

Морфинг 1 | Морфинг 2

Контент

комментарий Serg_pnz

Обратите внимание, что в коде страницы в стилях на слой мы устанавливаем свойства в соответствии со спецификацией
#morphDiv { ... border: solid 5px #1587b1; ... }
а в скрипте используем прямое обращение к цвету или толщине рамки
...
borderWidth: 5,
borderColor: '#1587b1'
...

js-код

window.addEvent('domready', function() {
	$('morphDiv').set('morph', { duration: 2000 });
	$('clickMe3').addEvent('click', function(e) {
		$('morphDiv').morph({
			color: '#000',
			backgroundColor: '#fff',
			width: 400,
			height: 50,
			borderWidth: 10,
			borderColor: '#ff9900'
		});
		e.stop();
	});
	$('clickMe4').addEvent('click', function(e) {
		$('morphDiv').morph({
			color: '#fff',
			backgroundColor: '#000',
			width: 300,
			height: 200,
			borderWidth: 5,
			borderColor: '#1587b1'
		});
		e.stop();
	});
});

html-код

<a href="#" id="clickMe3">Морфинг 1</a> |
<a href="#" id="clickMe4">Морфинг 2</a>
<div id="morphDiv">Контент</div>

Ссылки

Скачать пример (zip, 30 kb)

Статья