Для начала рассмотрим, с помощью чего можно делать анимацию свойств элемента. В Mootools есть 2 очень хороших класса — Fx.Tween, который используется для перехода от одного значения CSS свойства к другому, и Fx.Morph, который делает тоже самое, но сразу для нескольких свойств.

Допустим, мы хотим, чтобы при наведении на все ссылки внутри блок с id="links-block" цвет ссылок плавно менялся с синего на красный. Сделаем ссылки побольше, чтобы было видно изменение. HTML тут совсем простой, так что рассмотрим только JavaScript:

<script type="text/javascript">
window.addEvent('domready', function() {
    var duration = 350; // время перехода
	
    // проходим по всем ссылкам внутри контейнера
    $each($$('#links-block a'), function(item) {
        // событие при наведении
        item.addEvent('mouseover', function(e) {
            e.stop(); // останавдиваем событие наведения
            var colorFx = new Fx.Tween(this, { 'duration': duration }); // создаем новый переход с указанной продолжительностью
            colorFx.start('color', '#E00'); // делаем переход цвета от текущего до красного
        });
		
        // все точно так же
        item.addEvent('mouseout', function(e) {
            e.stop();
            var colorFx = new Fx.Tween(this, { 'duration': duration });
            colorFx.start('color', '#00E');
        });
    });
});
</script>

Все замечательно, смотрим пример.

Теперь предлагаю немного усложнить задачу — в дополнение к изменению цвета, меняем еще и фон. Скажем, был белый фон и синий текст, стал синий фон и белый текст. До этого мы использовали класс Fx.Tween, а сейчас будет работать с Fx.Morph:

<script type="text/javascript">
window.addEvent('domready', function() {
	var duration = 350; // время перехода
	
	// проходим по всем ссылкам внутри контейнера
	$each($$('#links-block a'), function(item) {
		// событие при наведении
		item.addEvent('mouseover', function(e) {
			e.stop(); // останавдиваем событие наведения
			var colorFx = new Fx.Morph(this, { 'duration': duration }); // создаем новый переход с указанной продолжительностью
			colorFx.start({
				'color': '#FFF',
				'background-color': '#00E'
			}); // делаем переход цвета и фона
		});
		
		// все точно так же
		item.addEvent('mouseout', function(e) {
			e.stop();
			var colorFx = new Fx.Morph(this, { 'duration': duration });
			colorFx.start({
				'color': '#00E',
				'background-color': '#EBEBEB'
			});
		});
	});
});
</script>

Вот наш пример.

Кстати, интересной особенностью класса Fx.Morph является то, что он позволяет делать переход между двумя классами элемента, т.е. если у вас был блок с классом first-class, по при помощи Fx.Morph его можно плавно перевести в класс second-class. По-моему, это довольно полезно.

Кроме того, вы можете задавать как именно будут меняться ваши значения: линейно, квадратично, кубически и так далее. Скажем, если вы хотите, чтобы в предыдущем примере изменение происходило кубически, то в объявление перехода нужно добавить аргумент transition:

...
var colorFx = new Fx.Tween(this, { 
    'transition': 'cubic:out' 
});
...

Не забудьте посмотреть полный список функций изменения.

Думаю, на сегодня все. В следущий раз опять посмотрим что-нибудь интересное.