//вначале, назначим нашему элементу переменную
var morphElement = $('morph_element');
 
//теперь создаем объект превращения
var morphObject = new Fx.Morph(morphElement);
 
//далее задаем параметры свойств, также как в случае с Fx.Tween
//только сейчас можно будет устанавливать несколько свойств
morphObject.set({
    'width': 100,
    'height': 100,
    'background-color': '#eeeeee'
});
 
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах
morphObject.start({
    'width': 300,
    'height': 300,
    'background-color': '#d3715c'
});

var morphSet = function(){
	//далее задаем параметры свойств стилей, также как в случае с Fx.Tween
	//только сейчас можно будет устанавливать несколько свойств стилей
	this.set({
		'width': 100,
		'height': 100,
		'background-color': '#eeeeee'
	});
}
 
var morphStart = function(){
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах
	this.start({
		'width': 300,
		'height': 300,
		'background-color': '#d3715c'
	});
}
 
 
var morphReset = function(){
	//устанавливаем первоначальные значения
	this.set({
		'width': 0,
		'height': 0,
		'background-color': '#ffffff'
	});
}
 
window.addEvent('domready', function() {
	var morphElement = $('morph_element');
	var morphObject = new Fx.Morph(morphElement);
 
	//тут добавляем прослушку соответствующим кнопкам
	//и соединяем переменную morphObject с функцией
	//что позволяет нам использовать "this"
	$('morph_set').addEvent('click', morphSet.bind(morphObject));
	$('morph_start').addEvent('click', morphStart.bind(morphObject));
	$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});

<div id="morph_element"></div>
<button id="morph_set">Установить</button>
<button id="morph_start">Запустить</button>
<button id="morph_reset">Сбросить</button>

//объявляем объекты morph и tween
//а все параметры вставляем в фигурные скобки
var morphObject = new Fx.Morph(morphElement, {
    //вначале объявляем название параметра
    //потом двоеточие - :
    //и значение параметра
    duration: 'long',
    transition: 'sine:in'
});

//определяем объект, а параметры в фигурные скобки { }
var morphObject = new Fx.Morph(morphElement, {
    fps: 60
});
 
//или
var framesPerSecond = 60;
 
var tweenObject = new Fx.Tween(tweenElement, {
    fps: framesPerSecond
});

//все как и выше
var morphObject = new Fx.Morph(morphElement, {
    unit: '%'
});

//и снова назначаем объект в переменную
var morphObject = new Fx.Morph(morphElement, {
    link: 'chain'
});

//определяем объект и вставляем его параметры в фигурные скобки
var morphObject = new Fx.Morph(morphElement, {
    duration: 'long'
});
 
//или
var morphObject = new Fx.Morph(morphElement, {
    duration: 1000
});

var tweenObject = new Fx.Tween(tweenElement, {
    transition: 'quad:in'
});

//определяем новый объект переменной
//и объявляем его новым объектом класса Fx.Tween
quadIn = new Fx.Tween(quadIn, {
        //тут выставляем опции
	link: 'cancel',
	transition: 'quad:in',
 
       //несколько событий
	onStart: function(passes_tween_element){
                //эти события применяются к нашему объекту
                //потому эффект "highlight" применяется к
                //началу анимации
	        passes_tween_element.highlight('#C54641');
	},
 
        //обратите внимание на разделители между функциями, в виде запятых,
        //тогда как, после последнего параметра или события
        //запятые не ставятся
        onComplete: function(passes_tween_element){
                //а тут мы применяем эффекст highlight к завершению анимации 
	        passes_tween_element.highlight('#C54641');
	}
});

//эту функцию будем запускать по событию mouseenter
var enterFunction = function() {
	this.start('width', '700px');
}
 
//эту функцию будем запускать по событию mouseleave
var leaveFunction = function() {
	this.start('width', '300px');
}
 
window.addEvent('domready', function() {
    //определим переменными некоторые элементы на странице
    var quadIn = $('quadin');
    var quadOut = $('quadout');
    var quadInOut = $('quadinout');
 
    //потом создаем по одному элементу tween каждой переменной, объявленной выше
    quadIn = new Fx.Tween(quadIn, {
	link: 'cancel',
	transition: Fx.Transitions.Quad.easeIn,
	onStart: function(passes_tween_element){
		passes_tween_element.highlight('#C54641');
	},
	onComplete: function(passes_tween_element){
		passes_tween_element.highlight('#E67F0E');
	}
    });
 
   quadOut = new Fx.Tween(quadOut, {
	link: 'cancel',
	transition: 'quad:out'
    });
 
    quadInOut = new Fx.Tween(quadInOut, {
	link: 'cancel',
	transition: 'quad:in:out'
    });
 
    //теперь добавим каждому элементу по прослушке на события
    //обратите внимание на использование функции .addEvents
    //которая работает также, как и .addEvent
    //только можно добавлять несколько событий, используя определённый шаблон
    $('quadin').addEvents({
        //вначале нужно объявить событие, поместив его в единичные кавычки,
        //отделить их двоеточием (":")
        //и объявить функцию, которая будет выполняться при этом событии.
        //в данном случае, это функция, которая связана с эффектом tween
        //разделения событий производится с помощью запятой;
        //после последнего события запятая НЕ ИСПОЛЬЗУЕТСЯ
        'mouseenter': enterFunction.bind(quadIn),
        'mouseleave': leaveFunction.bind(quadIn)
    });
 
    $('quadout').addEvents({
        //обратите внимание, как мы снова используем те же функции в этом коде
        'mouseenter': enterFunction.bind(quadOut),
        'mouseleave': leaveFunction.bind(quadOut)
    });
 
    $('quadinout').addEvents({
        //тут мы также используем те же функции
        //просто они каждый раз вызываются для работы с событием над разными элементами
        //и привязаны они к разным объектам tween
        'mouseenter': enterFunction.bind(quadInOut),
        'mouseleave': leaveFunction.bind(quadInOut)
    });

//создаем функцию
var tweenerFunction  = function() {
        //выбираем элемент, над которым будем издеваться
        //и добавляем к нему .tween
        //а в качестве атрибутов добавляем свойство, которое будет изменяться
        //и значение на которое это свойство нужно мягко изменить
	$('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)
        //к кнопке, которая должна вызвать эффект
        $('tween_button').addEvent('click', tweenerFunction);
});

<button id="tween_button">растянуть до 300 px</button>

//создаем функцию
var tweenFadeFifty = function() {
       //выбираем объект
       //добавляем к нему .fade
       //и задаем значение между 0 и 1, к которому нужно привести прозрачность элемента
       //(0 - невидимка, 1 - полный видимка)
	$('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)
        //к кнопке, которая должна вызвать эффект
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

<button id="tween_fade_fifty">Снижаем видимость до 50%</button>

//создаем функцию
var tweenHighlight = function(event) {
        //тут мы будем использовать конструкцию, которую пока еще не использовали - event.target
        //которая будет передаваться как параметр функции
        //на человеческом языке это звучит как "цель события"
        //а так как эффект применим к тому же элементу, к которому прикреплена прослушка на событие
        //не нужно будет снова создавать селектор.
        //обратите внимание, что addEvent автоматически передаст объект события в качестве параметра
        //в функцию, которую вызывает... оч полезно  
	event.target.highlight('#eaea16');
}
 
//создаем вторую функцию
//тут нужно передать сразу параметр
//так как функция будет вызываться при определенном событии
//и ей в параметры автоматически припишут событие (как в функции выше)
//а элемент можно вызывать с помощью конструкции .target
//(цель события)
var tweenHighlightChange = function(item) {
        //тут, вместо одного значения цвета, через запятую добавляем второй цвет
        //что установит первый цвет, и целевой цвет перехода
        item.target.highlight('#eaea16', '#333333');
}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);
    $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

var tweenerFunction  = function() {
	$('tweener').tween('width', '300px');
}
 
var tweenerGoBack  = function() {
	$('tweener').tween('width', '100px');
}
 
//функция .fade еще принимает ключевые слова 'out' и 'in',
//что эквивалентно 0 и 1 соответственно
var tweenFadeOut = function() {
	$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {
	$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {
	$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {
	event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {
	$('tween_button').addEvent('click', tweenerFunction);
	$('tween_reset').addEvent('click', tweenerGoBack);
	$('tween_fade_out').addEvent('click', tweenFadeOut);
	$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
	$('tween_fade_in').addEvent('click', tweenFadeIn);
	$('tweener').addEvent('mouseover',tweenHighlight);
});

window.addEvent('domready', function() {
        //вначале назначаем объект, над которым собираемся издеваться своим новым эффектом,
//и назначаем этот объект новой переменной
        var newTweenElement = $('newTween');
 
       //теперь создаем новый эффект, которому передаем переменную с объектом в качестве параметра
       var newTween = new Fx.Tween(newTweenElement);
});

<div id="newTween"><!-- это элемент, к которому применим новый Tween эффект--></div>
<!-- а это кнопка, которая очень скоро сыграет свою главную роль -->
<button id="netTween_set">Назначить</button>

var newTweenSet = function() {
        //обратите внимание на использование ключевого слова "this"
        //немного далее рассмотрю более подробно использование этого слова
	this.set('width', '300px');
}

//вначале добавляем событие клика к кнопке, которую видели немного выше
//потом, помимо простого вызова функции
//мы добавляем к ней ".bind()"
//и помещаем в скобки все, что мы хотим передать этой функции
//и теперь, внутри функции "newTweenSet," ключевое слово "this"
//будет относиться к переменной "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

//вот наша функция
var newTweenSet = function() {
        //так как мы использовали bind, "this" теперь относится к "newTween"
        //т.е. на самом деле мы говорим
        //newTween.set('width', '300px')
	this.set('width', '300px');
}
 
window.addEvent('domready', function() {
    //вначале назначаем нашему элементу переменную
	var newTweenElement = $('newTween');
 
    //потом создаем новый эффект FX.Tween и назначаем его своей собственной переменной
    var newTween = new Fx.Tween(newTweenElement);
 
    //а сейчас добавляем наше событие, в котором связываем newTween и newTweenSet с помощью bind
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});

//эта строчка изменит текущее значение свойства width на 300px
newTween.start('width', '300px');
 
//эта строчка установит свойство width на 100px, потом сделает плавный переход на 300px
newTween.start('width', '100px', '300px');