Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

//вначале, назначим нашему элементу переменную
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)
    });