Jquery плавное изменение цвета фона. Поменять цвет (jQuery)

Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью CSS и JQuery . С помощью данного плагина можно добиться удивительно красивых результатов оформления. Например, можно сделать клёвое меню, которое будет плавно менять цвет при наведении, и поверьте, смотрится это очень красиво.

Для начала между тегами и нужно поставить следующее:

Затем опять же между тегами и копируем вот этот скрипт:

$(document).ready(function(){ $(".Box").hover(function() { $(this).stop().animate({ backgroundColor: "#FF4500"}, 400); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 400); }); });

Где .Box — это класс блока, который мы придумали выше в CSS.

«#FF4500 » — цвет при наведении. 400 — скорость анимации при наведении.

«#ffffff» — исходный цвет после убирания курсора. 400 — скорость анимации при убирании курсора.

После того когда Вы всё сделаете как написано выше, цвет блока плавно будет меняться . Чтобы такой блок вставить на страницу, нужно просто добавить следующее в нужное место:

И блок появится.

Данный плагин может менять только цвет фона (бекграунд). Например к ссылкам или к тексту его прикрепить не получится. Цвет ссылок меняет другой плагин (скоро обязательно напишу как сделать).

Если Вам захочется сделать чтобы блоки на странице были разного цвета, как у меня в , Вам нужно будет между тегами и поставить несколько скриптов подряд и соответственно не забыть поменять цвет на желаемый. Самое главное нужно поменять класс, например в нашем примере выше — класс Box , а следующий скрипт должен быть с другим классом, например Box1 , затем Box2 и так далее.

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

Есть слой с текстом и кнопка при нажатии на которую нужно поменять цвет текста у этого слоя.

Поменять цвет (jQuery) $(document).ready(function(){ $("#color_change").click(function(){ $("#layer").css("color", "#F00"); }) }); #layer {border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;} Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?

В этом уроке речь пойдет об эффекте, при котором происходит плавная смена фона объекта в результате наведения курсора мыши на него.
В начале, как уже наверно успели привыкнуть (если вы не первый раз используете jQuery библиотеку), подключаем jQuery в нашего сайта.
По мимо самого jQuery , нам понадобиться еще и jQuery UI .

Если вы знакомы с принципами jQuery , то должны помнить, что в хедер мы должны поместить код вызова, в данном случае, анимации смены цвета, чтобы он подгрузился до того, как загрузится основное содержимое страницы. $(document).ready(function() { // поместить ваш код вызова анимации сюда });

Вот пример разметки html .

Изменение цвета фона элемента Анимация изменения цвета при наведении курсора / PC игры / Portal 2 Portal 2

Оригинальная Portal - вещь уже культовая и неожиданная для своего времени. Она только еще раз подтверждает проверенный веками тезис о торжестве идеи над передовыми технологиями.

CSS стили оформления нашей странички выглядят так.

Png); text-align:left; color:#333; width:800px; font-size:14px; font-family:georgia, "time new romans", serif; margin:0 auto; padding:0; } a{ color:#333; text-decoration:none } a:focus { outline: none; } h1 { font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; } h2 { font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; } h3, h3 a{ font-size:14px; font-family:verdana, helvetica, arial, sans-serif; letter-spacing:-1px; color:#333; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; } p { color:#333; float:left; line-height:22px; margin:5px; padding:0 0 10px; } #container { margin: 0; padding: 0; } .boxes { background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; } img { border:5px solid #CCCCCC; } div.info { border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width:100%; } .block { color:#0066CC; float:left; overflow:hidden; position:relative; width:600px; } .block h4, .block h4 a{ color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; }

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

$(document).ready(function(){ $(".boxes").hover(function() { $(this).stop().animate({ backgroundColor: "#40B8FE"}, 800); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 800); }); }); В параметрах backgroundColor задается цвет, а значение 800 - это скорость анимации.

Для динамического изменения свойств в jQuery служит функция animate. Она позволяет задать новое значение -свойства и время, в течении которого произойдет плавное анимированное изменение от старого значения к заданному. Очень мощная функция! Но, как обычно, есть и ложка дегтя.

Набор CSS-свойств с которыми работает animate ограничен. Фактически это только те свойства, которые могут принимать числовые значения. В частности, animate не может работать с цветом.

К счастью, существует плагин, который расширяет возможности animate и делает ее еще мощнее. Прошу любить и жаловать — jQuery.color! С его помощью в список понятных animate CSS-свойств можно добавить , и .

На практике это выглядит так: .

Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

• jquery.js (55.9 Kb) - библиотека jQuery версии 1.3.2;
• (3.66 Kb).

Подключаем jQuery и плагин:

В CSS явно задаем начальный цвет:

Div{ background-color:#0CF; }

Теперь используем функцию animate, например при наведении мыши:

jQuery(document).ready(function(){ jQuery("div").mouseenter(function () { jQuery(this).animate({ backgroundColor:"#03C", }, 500); }); jQuery("div").mouseleave(function() { jQuery(this).animate({ backgroundColor:"#0CF", }, 500); }); });

Плагин позволяет работать со следующими CSS-свойствами:

• применение класса дает более гибкий механизм, чем просто функция animate. Ведь тут мы не ограничены в выборе одновременно меняющихся свойств.

• достаточно «тяжелый» метод — библиотеки прилично весят.

Если требуются более сложные эффекты, чем «тянет» animate, можно использовать эффект switchClass из набора UI. Но если задача ограничивается плавным изменением цвета — применяй более легкий плагин jQuery.color.

JQuery.color делает мою любимую функцию animate еще лучше. Очень понравилось именно то, что он не добавляет никаких лишних классов или id. Просто расширяет множество возможных параметров animate. Юзать всем для создания красивого эффекта плавного изменения цвета!