Подключайте и используйте одну из трёх десятков функций easing (наглядно, с

иллюстрациями – animate.easing.html, а так же http://easings.net/)

Но давайте вернёмся к функции animate, которая в качестве параметров может принимать ещё один набор параметров, который уже не будет казаться таким простым:

params – CSS свойства (уже было)

options – тут целый набор возможностей, часть уже описывалась ранее:

duration – скорость анимации

easing – функция («linear» или «swing»)

complete – функция, которая будет вызвана после окончания анимации

step – функция, которая будет вызвана на каждом шаге анимации, о ней расскажу чуть ниже

queue – флаг/параметр очереди, чуть позже опишу подробнее

specialEasing – хэш в котором можно описать какую easing функцию следует использовать для изменения определённых параметров

Step-by-step

Хотелось бы отдельно остановиться на функции step, и для наглядности приведу пример step-функции которая отображает текущее значение анимированного параметра:

var customStep = function(now, obj) { obj.elem; // объект анимации

obj.prop; // параметр, который анимируется obj.start; // начальное значение

obj.end; // конечное значение

obj.pos; // коэффициент, изменяется от 0 до 1 obj.options; // опции настроек анимации

now; // текущее значение анимированного параметра, вычисляется как

// now = (obj.end - obj.start) * obj.pos $(this).html(obj.prop +': '+now+obj.unit); // вывод текста

}

$("#box").animate({height: "+=10px"}, {step:customStep});

Мне ни разу не приходилось использовать step-функции, лишь только для примера

55

В очередь…©

Немного об очередности работы функции animate – большинство читателей, наверное, уже знакомо с организацией последовательной анимации – для этого мы можем использовать цепочку вызовов:

$('#box ')

// говорим что меняем

.animate({left:'+=100'})

// следующий вызов добавляется в очередь на выполнение

.animate({top:'+=100'})

Для параллельного запуска анимации, необходимо будет внести следующие изменения:

$('#box')

// говорим что меняем

.animate({left:'+=100'})

// следующий вызов будет игнорировать очередь

.animate({top:'+=100'}, {queue:false})

Есть ещё чудесная функция stop(), которая позволяет остановить текущую анимацию на полпути, а так же почистить очередь при необходимости. Для обеспечения различного поведения функции, она принимает три параметра:

queue – имя очереди; для работы с дефолтной очередью анимации «fx» – опускаем

clearQueue – флаг очистки очереди

jumpToEnd – применить результат анимации али нет

// останавливаем выполнение текущей анимации $('#box').stop();

//останавливаем выполнение текущей анимации

//и всех последующих (чистим очередь)

$('#box').stop(true);

//останавливаем выполнение текущей анимации и всех последующих

//но применяем результат текущей

$('#box').stop(true, true);

56

//останавливаем выполнение только текущей анимации

//и применяем её результат

$('#box').stop(false, true);

Пример есть, и требует ваших проб и ошибок – animate.queue.html

Заметка на будущее: если вы сделали выпадающее меню, и поигравшись с мышкой оно продолжает выпадать и исчезать, то значит надо вставить stop() в обработчик события

По умолчанию вся анимация над объектом складывается в очередь «fx», но с версии 1.7 можно указывать произвольную очередь:

Для чего нам может понадобиться произвольная очередь? Да для распараллеливания анимации, чтобы мы могли запустить одну очередь анимации, и в любой другой момент запустить другую очередь, возможно, это заклад под игры? Но чего гадать, давайте пример посмотрим – animate.game.html

Отключение

Иногда требуется отключить всю анимацию (к примеру, для отладки) воспользуйтесь следующей конструкцией:

jQuery.fx.off = true;

57