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

  1. Подключить jQuery и jQuery UI
  2. Подключить plugin http://github.com/jquery/jquery-color который добавляет возможность использовать функцию http://api.jquery.com/animate/ между цветами
  3. Написать несложный скрипт:
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#content a").hover(function(){
    		$(this).stop().animate({color: '#9AC23D'}, 500);
    	}, function() {
    		$(this).stop().animate({color: '#FFF'}, 1400); // original color
    	});
    });
    </script>
    

    разместив его между <head>...</head>

Теперь сделаем тоже самое, но с помощью CSS3 Рассмотрим на примере плавного изменения цвета ссылок и добавления http://htmlbook.ru/css/text-shadow с помощью http://www.w3schools.com/css3/css3_transitions.asp

#content a {
	color: #FFF;
	transition: color 0.7s ease-in-out;
}
#content a:hover {
	color: #9AC23D; /* цвет текста при наведении */
}

Обратите внимание на временной параметр анимации ease, он может иметь ряд значений, подробнее о них можно почитать здесь.
Обратите внимание, что нам не потребовалось подключать никаких дополнительных библиотек.

Demo http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Данная публикация старше 4-х лет. Возможно существуют более рациональные способы решения рассматриваемой задачи или вопроса.

Выразить благодарность

Если эта публикация оказалась для Вас полезной и вы хотите выразить свою благодарность, сделайте пожалуйста её репост в социальных сетях или на своём сайте.

Так же, Вы можете перевести любую сумму, которую посчитаете нужной на наш счёт, что сильно мотивирует к написанию новых полезных статей.

Комментарии: