Плагин jQuery Approach

Approach - плагин jQuery, который открывает возможности по анимированию изменения свойств элементов в зависимости от длизости курсора мыши.

Демонстрация

Информация

Текущая версия: 1.0
Размер сжатого файла: 3350 байт
Лицензия: MIT/GPL

Пример

Допустим, что объект foo имеет начальную непрозрачность 0.2 (установлено в таблице стилей).

В таблице стилей:

    #foo { opacity: 0.2; }

В коде вызова скрипта:

    $("#foo").approach({
        opacity: 0.99
    }, 300);

Когда курсор мыши придвигается к объекту foo и находится от него в радиусе, заданном при вызове плагина (в нашем примере радиус равен 300px), непрозрачность объекта начинает меняться от значения 0.2 до 0.99 пропорционально расстоянию от курсора мыши до объекта.

Схема дейстивия плагина jQuery Approach

Примечание: Плагин принимает любое свойство CSS, которое можно использовать для анимации jQuery, а также доступны параметры работы с цветом, если вы используете эффекты jQuery UI.

Демонстрация

Простая демонстрация, в которой анимируется размер шрифта и цвет.

$("a#demo-link").approach({
    "fontSize": "40px",
    "color": "#CC3300"
}, 200);

В следующем примере используется 40 кругов, каждый из которых имеет непрозрачность 0.2. Плагин jQuery Approach применяется для всех кругов с устновленной дистанцией действия 100px и анимацией непрозрачности до значения 0.8 при приближении курсора мыши к центру окружности.

Примечание: демонстрация работает в тех браузерах, которые поддерживают свойство CSS opacity (в старых версиях IE не действует).

$("#wrap img").approach({
    "opacity": 0.8
}, 100);

Требуется

jQuery (рекомендуется версия не старше 1.3.2)

Опционально

jQuery UI (если планируется анимировать изменение цвета)