Mootools для начинающих, урок №2
Привет!
В прошлый раз мы начали знакомство с Mootools с рассмотрения получения DOM элементов, научились манипулировать их свойствами и привязывать события к элементам.
Сегодня мы посмотрим, как делать простую анимацию различных свойств элементов с помощью классов Fx.Tween и Fx.Morph.
Для начала рассмотрим, с помощью чего можно делать анимацию свойств элемента. В 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'
});
...
Не забудьте посмотреть полный список функций изменения.
Думаю, на сегодня все. В следущий раз опять посмотрим что-нибудь интересное.
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 6
RSSМне кажется, что-то не то в классе. Сначала нужно вырубить таймер, потом взять текущее значение. Там какая-то путаница.
Когда-то я делал подобный класс, но не для Mootools. Мне удалось победить эту проблему.
Пробовал в ФФ нормально, в Опере действительно наблюдается глюк