Материал из JQuery
Описание
Модуль эффектов jQuery UI расширяет функциональность метода .animate(), обеспечивая возможность плавного изменения цветовых параметров у элементов. А именно:
(необходимо указывать эти параметры именно так, а не через дефис как это делается в соответствующих css-параметрах)
Цвет можно указать в трех различных форматах:
шестнадцетеричном (#FF0000) rgb (rgb(255,255,255)) и по имени («black»)
Например, чтобы плавно изменить цвет фона у элемента с идентификатором elId на красный, можно использовать следующий код:
Для динамического изменения свойств в jQuery служит функция animate. Она позволяет задать новое значение CSS-свойства и время, в течении которого произойдет плавное анимированное изменение от старого значения к заданному. Очень мощная функция! Но, как обычно, есть и ложка дегтя.
Проблема
Набор CSS-свойств с которыми работает animate ограничен. Фактически это только те свойства, которые могут принимать числовые значения. В частности, animate не может работать с цветом.
Решение
К счастью, существует плагин, который расширяет возможности animate и делает ее еще мощнее. Прошу любить и жаловать — jQuery.color! С его помощью в список понятных animate CSS-свойств можно добавить color, background-color, border-color и outline-color.
На практике это выглядит так: демо пример.
Что качать?
- jquery.js (55.9 Kb) — библиотека jQuery версии 1.3.2;
- jquery.color.js (3.66 Kb).
Быстрый старт
Подключаем jQuery и плагин:
В CSS явно задаем начальный цвет:
Теперь используем функцию animate, например при наведении мыши:
А теперь подробнее
Плагин позволяет работать со следующими CSS-свойствами:
| Псевдоним для animate | Название свойства | Расшифровка |
|---|---|---|
| backgroundColor | background-color | цвет фона |
| borderBottomColor | border-bottom-color | цвет нижней границы |
| borderLeftColor | border-bottom-color | цвет левой границы |
| borderRightColor | border-right-color | цвет правой границы |
| borderTopColor | border-top-color | цвет верхней границы |
| color | color | цвет текста |
| outlineColor | outline-color | цвет обводки |
Пример:
Меняем цвет границ th при наведении мыши:
Особенность
Помни, что нужно обязательно задать начальное значение цвета. Иначе анимация не сработает!
Плюсы:
- работает во всех популярных браузерах;
- небольшой размер;
- удобство в использовании: никаких дополнительных манипуляций, просто расширяет функциональность animate, добавляя возможность изменения цвета.
Минусы:
- не обнаружено.
Еще одно решение
Плавно окрасить блок можно и по-другому, используя эффект switchClass из набора UI для постепенного применения класса. Формулировочка «постепенное применения класса» достаточно хорошо описывает визуальный эффект, хотя, конечно, постепенно применяется не сам класс, а новые значения свойств, заданных в нем.
Выглядеть это может примерно так:
Но в этом варианте придется подключать целый ряд библиотек из набора UI. Подробнее с switchClass можно ознакомиться в официальной документации UI.
Забавная функция для анимации в jQuery — .animate().
С её помощью можно придавать динамику элементам — изменять ширину, высоту, размеры шрифта и другие свойства, имеющие числовые свойства.
Но что делать если нужно анимировать, например background-color у блока? Ведь эта функция не работает со свойствами типа color, background-color, border-color и т.п.
Ниже будем решать эту проблему, с помощью плагина jQuery Color.
С помощью этого чуда можно исправить эту жестокую несправедливость по отношению к анимации цвета, и облегчить себе жизнь!
Скачать плагин можно с Git’а.
Подключаем его и наслаждаемся в полной мере функцией анимации:
На момент написания поста заявлена поддержка следующих свойств:
Вот так можно исправить ситуацию, если анимация фона не работает.