Page 96 - jQuery для начинающих

Animate

Информация в данном разделе актуальна для jQuery версии 1.8 и выше, если вас
заинтересуют возможности расширения для более старых версий, то читайте

мою статью «Пишем плагины анимации»

Для начала затравка – метод animate() манипулирует объектом jQuery.Animation,
который предусматривает следующие точки для расширения:

— jQuery.Tween.propHooks
— jQuery.Animation.preFilter
— jQuery.Animation.tweener

Начну рассказ с jQuery.Tween.propHooks, т.к. уже есть плагины, в код которых можно
заглянуть :) Для пущей наглядности я возьму достаточно тривиальную задачу – заставим
плавно изменить цвет шрифта для заданного набора элементов:

$('p').animate({color:'#ff0000'});

Приведенный выше код не даст никакого эффекта, т.к. свойство «color» фреймворк не
анимирует, но это можно исправить – надо лишь прокачать jQuery.Tween.propHooks:

$.Tween.propHooks.color = {
get: function(tween) {
return tween.elem.style.color;

}
set: function(tween) {

tween.easing; // текущий easing
tween.elem; // испытуемый элемент
tween.options; // настройки анимация

tween.pos; // текущий прогресс
tween.prop; // свойство которое изменяем
tween.start; // начальные значения

tween.now; // текущее значение
tween.end; // желаемое результирующие значения
tween.unit; // еденицы измерения

}
}

96

www.trk.kg