Обучение на анимация за работа с цвят - Медийното изображение - Уебсайтът е в процес на изпълнение

За да променя динамично свойствата, jQuery използва функцията animate. Тя ви позволява да зададете нова стойност за свойството CSS и времето, през което ще настъпи плавна анимирана промяна от старата стойност към дадената стойност. Много мощна функция! Но, както обикновено, има и муха в мехлема.

Наборът от CSS свойства, с които анимацията работи, е ограничен. Всъщност това са само тези свойства, които могат да приемат числови стойности. По-специално, animate не може да работи с цвят.

За щастие има плъгин, който разширява възможностите на animate и го прави още по-мощен. Моля, обичайте и уважавайте jQuery.color! С него можете да добавяте цвят, цвят на фона, цвят на граница и цвят на контур към списъка с разбираеми анимирани CSS свойства.

На практика това изглежда така: демо пример.

Какво да изтегля?

• jquery.js (55,9 Kb) — jQuery библиотека версия 1.3.2;
• jquery.color.js (3,66 Kb).

Бърз старт

Свържете jQuery и плъгин:

Ние изрично задаваме първоначалния цвят в CSS:

Сега използваме функцията за анимиране, например, когато задържаме мишката:

А сега по-подробно

Плъгинът ви позволява да работите със следните CSS свойства:

Псевдоним за анимирано име на свойство Обяснение

Цвят на фона	Цвят на фона	Цвят на фона
borderBottomColor	цвят на границата-отдолу	цвят на долната граница
borderLeftColor	цвят на границата-отдолу	цвят на лявата граница
borderRightColor	цвят на дясната граница	цвят на дясната граница
borderTopColor	цвят на горната граница	цвят на горната граница
цвят	цвят	цвят на текста
outlineColor	цвят на контура	цвят на щриха

Променете цвета на границите при задържане на мишката:

Особеност

Не забравяйте, че винаги трябва да задавате първоначалната стойност на цвета. В противен случай анимацията няма да работи!

• работи във всички популярни браузъри;
• малък размер;
• лекота на използване: без допълнителни манипулации, просто разширява функционалността на animate чрез добавяне на възможност за промяна на цветовете.

• не е открит.

Още едно решение

Друг начин за плавно оцветяване на блок е да използвате ефекта switchClass от UI комплекта за постепенно прилагане на класа. Формулировката "постепенно прилагане на класа" описва визуалния ефект доста добре, въпреки че, разбира се, не самият клас се прилага постепенно, а новите стойности на свойствата, посочени в него.

Може да изглежда така:

Но в тази опция ще трябва да свържете няколко библиотеки от набора на потребителския интерфейс. Повече информация за switchClass можете да намерите в официалната документация на потребителския интерфейс.

---