Archie Goodwin

Сказочная функция jQuery .animate() позволяет передвигать обьекты, менять их размеры, в общем анимировать переход для практически любого CSS свойства, к сожалению кроме цвета текста (color), цвета заливки (background-color) и цвета границы обьекта (border-color). Исправить это упущение стандартного функционала jQuery позволяет плагин BitstormAnimateColor или его другое название jquery.animate-colors.

Примеры обращений к условному элементу с id demodiv через плагин:

Анимация цвета шрифта:

$('#demodiv').animate({color: '#E4D8B8'})

Анимация цвета заливки:

$('#demodiv').animate({backgroundColor: '#400101'})

Анимация цвета границы элемента:

$('#demodiv').animate({borderColor: '#dddddd'})

Анимация определенной части границы элемента (нижняя - borderBottomColor, верхняя - borderTopColor, правая - borderRightColor, левая - borderLeftColor):

$('#demodiv').animate({borderBottomColor: '#00346B'})

Подключив плагин к сайту, мы можем написать пользовательский скрипт для анимации цвета чего угодно, для примера возьмем обычную текстовую ссылку и ссылку в виде кнопки, примеры которых можете взглянуть на странице demo-просмотра

Анимация цвета ссылки при наведении:

<script type="text/javascript"> 
$("a").hover(
function() {
 $(this).animate({
 color: '#4dc7ec' // цвет ссылки при наведении
 });
}, function() {
 $(this).animate({
 color: '#3d3d3d' // возвращаемый цвет ссылки после отвода курсора от ссылки, должен соответствовать тому цвету, который задан в CSS
 });
});
</script> 

Данный код анимирует цвет всех ссылок на странице, если необходимо задать анимацию цвета ссылки элемента с классом, например, link, то нужно изменить в коде обращение, а именно заменить строку:

$("a").hover(

на

$("a.link").hover(

В случае, если захочется анимировать цвет всех ссылок, которые входят в определенный блок, обозначенный, к примеру, классом divbox, то обращение в коде нужно будет заменить с

$("a").hover(

на

$(".divbox a").hover(

Анимация фоновой заливки кнопки / ссылки при наведении:

<script type="text/javascript"> 
$("a.ReadMore").hover(
function() {
 $(this).animate({
 backgroundColor: '#353535' // цвет заливки при наведении
 });
}, function() {
 $(this).animate({
 backgroundColor: '#4dc7ec' // возвращаемый цвет заливки после отвода курсора
 });
});
</script>

По структуре код аналогичен прошлому примеру, только здесь мы использовали свойство backgroundColor вместо просто color, их можно использовать параллельно или эксперементировать в комбинации с свойствами цвета границы borderColor.

В коде идет обращение к ссылке с классом ReadMore, как обращаться к другим элементам мы разобрали на примере свойства color

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

По сути, код мало чем будет отличаться, от того что мы уже видели выше, только теперь анимация будет не по событию hover, а по событию click, да и анимацию стиля в случае клика резонней задавать другому обьекту, а не самой кнопке. В качестве примера, возьмем кнопку с классом colorFunc и будем обращаться к блоку с классом colorMe:

<script type="text/javascript"> 
$(".colorFunc").click( //событие клика по обьекту с классом colorFunc
function() {
 $(".colorMe").animate({ //анимация стиля заданного обьекта с классом colorMe
 color: '#ff77f9',
 borderColor: '#446dc7',
 backgroundColor: '#75cff0' 
 });
});
</script>