Базовая функция анимации

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Базовая функция анимации VcorpJS доступна только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS

Для краткого обзора особенностей и правил анимации рекомендуется почитать Анимация - краткий обзор и правила

.animate( node , [ time ] , [ step ] , [ startPos ] , [ endPos ] , [ startBW ] , [ endBW ] , [ startBR ] , [ endBR ] , [ startOpacity ] , [ endOpacity ] , [ startBGС ] , [ endBGС ] , [ startBC ] , [ endBC ] , [ handler ] )

Функция запускает анимацию объекта node и возвращает закреплённый за ним числовой дескриптор (от 1 од 99).
Дескриптор - это ссылка на внутренний дескриптор движка анимации, где запоминаются значения стартовых, конечных и текущих стилей для объектов.
Если параметры некорректные или запуск анимации невозможен (заняты все дескрипторы), возвращает null

node - ссылка HTML-объект или его текстовый id

time - Время анимации в миллисекундах (не менее 100). По умолчанию 100.

step - Частота шагов анимации в миллисекундах (не менее 10). Если step < 10 или step > time - вычисляется как time / 10

Следующие параметры могут выборочно присутствовать или отсутствовать. При отсутствии параметра значение соответствующего свойства анимируемого элемента не изменяется. Если параметр не надо изменять и он не последний в списке, указывайте null
В массивах необходимо указывать числовые параметры (пиксели) от 0 и выше или null
Если не надо изменять один из параметров в массиве, указывайте индекс как null
Параметр null и [ null,null,null,null ] - эквивалентны для параметров - массивов.

startPos - массив [ left, top, width, height ] - СТАРТОВОЕ положение и размеры объекта

endPos - массив [ left, top, width, height ] - КОНЕЧНОЕ положение и размеры объекта

startBW - массив [ left, top, right, bottom ] - СТАРТОВЫЕ border-width - толщина рамок

endBW - массив [ left, top, right, bottom ] - КОНЕЧНЫЕ border-width - толщина рамок

startBR - массив [ top-left, top-right, bottom-right, bottom-left ] - СТАРТОВЫЕ border-radius

endBR - массив [ top-left, top-right, bottom-right, bottom-left ] - КОНЕЧНЫЕ border-radius

startOpacity - СТАРТОВОЕ значение прозрачности (от 0 до 1). Для IE8 тоже от 0 до 1

endOpacity - КОНЕЧНОЕ значение прозрачности (от 0 до 1). Для IE8 тоже от 0 до 1

startBGС - СТАРТОВЫЙ цвет фона background-color в формате #hhhhhh (при формате #hhh действие проигнорируется)

endBGС - КОНЕЧНЫЙ цвет фона background-color в формате #hhhhhh (при формате #hhh действие проигнорируется)

startBC - СТАРТОВЫЙ цвет рамки border-color в формате #hhhhhh (при формате #hhh действие проигнорируется)

endBC - КОНЕЧНЫЙ цвет рамки border-color в формате #hhhhhh (при формате #hhh действие проигнорируется)

handler - callback-функция для текущего объекта (дескриптора) анимации. Формат вызова: function( status, desc ); где:

• status - состояние анимации: "start", "end", "stop", "error"
• desc - номер дескриптора анимации (от 1 до 99), который был назначен для объекта node.

callback - функция может быть текстовой строкой с JavaScript-кодом, в таком случае имена параметров внутри функции таковы: status,desc
(см. правила для callback - функций).

Внутри callback-функции можно остановить анимацию ( .aClear(desc) ) или запустить новую анимацию этого-же объекта node (например, сделать реверс, поменяв параметры местами).

.aClear( desc )

Функция останавливает анимацию объекта и очищает (освобождает) дескриптор desc, который был возвращён функцией старта анимации .animate().

Объект замрет в текущем положении, если в данный момент выполняется анимация. Если при старте анимации была указана callback-функция, она будет вызвана с параметром "stop" (только если анимация еще не завершена, иначе только освобождается дескриптор). Освобождение дескриптора не влияет на сам объект.

См. ниже пример анимации на отдельной странице: Блок с примерами использования функций

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.

Демо - блок с примерами использования функций

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

• объект управления событиями
• комбинированные списки выбора (combobox)
• анимационные меню
• вывод модального окна сообщения
• работа с окнами и панелью окон
• работа с Гридами (в статичном блоке и в окнах)
• работа плагина анимации
• возможно, что-то ещё...

См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).

Ссылка на страницу: Визуальный пример некоторых плагинов