Jquery плавное изменение цвета фона. Как изменить цвет фона: после псевдо класса с jQuery? Анимация изменения цвета при наведении курсора

Идея предельно проста и понятна… Предположим, что хотим смену цвета фона страницы при прокрутке каждых 500px от верха. К сожалению найти готовый простой вариант, поддающийся модернизации, не удалось найти. Поэтому совместно с @only_darkangel был написан элементарный вариант:

Сперва подключим библиотеки в head, если они ещё не подключены

Затем пару строк стилей

body {
background: #fff;
height:4000px;
}

Далее скрипт, который и будет менять цвет страницы при прокрутке.
Цифра 400 задаёт скорость смены цвета (0,4 секунды). В самом низу цифра 451 задаёт время проверки положения скролла, данная цифра должна быть всегда больше времени скорости цвета.

window.onload=function(){
setInterval(function(){
var scroll = $(window).scrollTop();
if (scroll == 0) {
$("body").animate({backgroundColor: "white"}, 400); //изначально фон белый
}
if (scroll = 1) {
$("body").animate({backgroundColor: "green"}, 400); //затем если проскроллили от 1 до 500 пикселей, то цвет меняется на зелёный
}
if (scroll = 501) {
$("body").animate({backgroundColor: "red"}, 400); //более 501 пикселей прокрутки от верха цвет смениться на красный
}
if (scroll = 1001) {
$("body").animate({backgroundColor: "blue"}, 400);
}
if (scroll >= 1501) {
$("body").animate({backgroundColor: "yellow"}, 400);
}
}, 451);
}

ДЭМО работы скрипта. Как видим всё предельно просто и понятно, но и в то же время примитивно.

Ещё я нашел вариант более красивый, но и сложный http://jsfiddle.net/jguffey/mxkx9j2o/ , возможно так же пригодится.

Задавайте вопросы в комментах, делитесь статьёй в соц. сетях нажав на соответствующую кнопочку ниже 🙂 Спасибо, что читаете!

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

Оставить галочку можно только напротив Effects Core . Именно этот модуль расширяет нужный нам метод jQuery.animate() , достаточно просто подключить скачанную сборку:

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

Шаг 2. Задержка между анимацией элементов.

Теперь когда с анимацией всё в порядке, есть вторая особенность, усложняющая задачу - сделать задержку между анимацией элементов коллекции.

Допустим у нас есть коллекция элементов нумерованного списка:

Var $elements = $("ol > li");

Анимация каждого следующего элемента коллекции должна начинаться с определенной задержкой после предыдущей.

Достичь необходимого результата можно при помощи следующего кода:

For (var i = 0; i

Обратите внимание, что в setTimeout() первым параметром передается функция, возвращающая другую функцию.

Если этого не сделать, то переменная i будет передана по ссылке и когда наступит время выполнения функции по таймеру, i будет иметь свое последнее значение равное $elements.length , так как к этому моменту цикл for уже закончиться и анимация не будет выполнена вообще.

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

Выводы

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

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

Поменять цвет (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;} Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?

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

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 — скорость анимации при убирании курсора.

HTML

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

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

Важно

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

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

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

Для динамического изменения свойств в 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. Юзать всем для создания красивого эффекта плавного изменения цвета!