Блог старого компьютера

Блог старого компьютера


Главная Jquery Плавная смена цвета при наведении jquery

Плавная смена цвета при наведении jquery

09.01.2013 10:33 Администратор Jquery
Печать PDF
В догонку к прошлому посту по jquery решил написать еще один который так же строится с помощью функции animate. По сути и тот и этот пост довольно схожи, но у новичков и не знающих людей возникает вопрос почему плавная смена прозрачности, размеров, отступов происходит, а вот смена цвета нет хотя впринципе и код то для их использования одинаковый. На самом деле все очень просто сама библиотека jquery может работать только с плавным изменением числовых значений, а цвет у нас к таким значениям не относится и по этому в этом случае необходимо воспользоваться дополнительным плагином для jquery, он называется  jquery.color. Данный плагин можно найти на просторах интернета ну или скачать из примеров который я приложу.

Плавная смена цвета при наведении

Значит практически все в исполняющем коде  у нас отсается как было заисключеним добавленного плагина для работы с цветами. Общий код для плавного изменения цвета ссылки при наведении получается у нас таким:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.color.js"></script>
<style>
#url{
font-weight:bolder;
font-size:20px;
color:#0026FF;
}
</style>
<script>
$(document).ready(function(){
$("#url").hover(function(){
$(this).animate({"color": "#FF0000"}, 400);
}, function(){
$(this).animate({"color": "#0026FF"}, 400);
});
});
</script>
<a href="#" id="url">Наведи на меня</a>

Так же плавной сменой можно управлять изменяя значение скорости (в данном случае это цифра 400)

Плавная смена цвета фона при наведении

Далее хочу рассмотреть пример с планой сменой фона так как думаю что у новичка так же возникнет проблема с названием свойства. В данном случае нужно указывать не background, а  backgroundColor. Так же хочу отметить чтоб все заработало необходимо в CSS задать background так как по умолчанию его нет, и следовательно менять нечего. Код приобретет примерно вот такой вид:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.color.js"></script>
<style>
#url{
font-weight:bolder;
font-size:20px;
background:#0026FF;
}
</style>
<script>
$(document).ready(function(){
$("#url").hover(function(){
$(this).animate({"backgroundColor": "#FF0000"}, 400);
}, function(){
$(this).animate({"backgroundColor": "#0026FF"}, 400);
});

});
</script>

<a href="#" id="url">Наведи на меня</a>

 Вот сообственно и все. Выкладываю два примера в архиве чтоб можно было наглядно убедится что все это работает и функционирует.

Скачать пример

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?