Jquery плавное изменение цвета фона. Эффект чередующегося перетекания цвета

Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью 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 библиотеку), подключаем jQuery в нашего сайта.
По мимо самого jQuery , нам понадобиться еще и jQuery UI .

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

HTML

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

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

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

CSS

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

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

Оставить галочку можно только напротив 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, такими как::before и::after (и старая версия с одной точкой с запятой), используя jQuery?

Например, моя таблица стилей имеет следующее правило:

Span::after{ content:"foo" }

Как я могу изменить «foo» на «bar» с помощью jQuery?

Вы также можете передать содержимое псевдоэлементу атрибуту данных, а затем использовать jQuery для управления этим:

Foo

$("span").hover(function(){ $(this).attr("data-content","bar"); });

Span:after { content: attr(data-content) " any other text you may want"; }

Если вы хотите, чтобы «другой текст» не отображался, вы могли бы объединить это с решением seucolega следующим образом:

Foo

$("span").hover(function(){ $(this).addClass("change").attr("data-content","bar"); });

Span.change:after { content: attr(data-content) " any other text you may want"; }

Это непрактично, поскольку я не писал это для использования в реальном мире, просто чтобы дать вам пример того, что может быть достигнуто.

Css = { before: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append(" "); } else { $("#cust_style").remove(); $("body").append(" " + elem + ":before {" + attr + "} "); } }, after: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append(" "); } else { $("#cust_style").remove(); $("body").append(" " + elem + ":after {" + attr + "} "); } } }

это добавление в настоящее время добавляет элемент или добавляет элемент Style, который содержит необходимый атрибут, который будет влиять на элемент target после элемента Pseudo.

это можно использовать как

Css.after("someElement"," content: "Test"; position: "absolute"; ") // editing / adding styles to:after

Css.before(...); // to affect the before pseudo element.

как после: и до: псевдоэлементы не доступны непосредственно через DOM, в настоящее время невозможно отредактировать конкретные значения css свободно.

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

Так что сделайте собственные эксперименты с этим и другими!

приветствует - Адарш Хедде.

Спасибо всем! мне удалось сделать то, что я хотел: D http://jsfiddle.net/Tfc9j/42/ вот посмотрите

я хотел иметь непрозрачность внешнего div для быть отличным от непрозрачности внутреннего div и это изменение с помощью щелчка где-то еще;) Спасибо!

$("#ena").on("click", function () { $("head").append("#ena:before { opacity:0.3; }"); }); $("#duop").on("click", function (e) { $("head").append("#ena:before { opacity:0.8; }"); e.stopPropagation(); }); #ena{ width:300px; height:300px; border:1px black solid; position:relative; } #duo{ opacity:1; position:absolute; top:50px; width:300px; height:100px; background-color:white; } #ena:before { content: attr(data-before); color: white; cursor: pointer; position: absolute; background-color:red; opacity:0.9; width:100%; height:100%; }

duoyyyyyyyyyyyyyy p

Вы можете создать фальшивое свойство или использовать существующее и наследовать его в таблице стилей псевдоэлемента.

Кажется, что это не работает для свойства content: (

Вы не можете выбирать псевдо элементы в jQuery, потому что они не являются частью DOM. Но вы можете добавить определенный класс к элементу отца и управлять его псевдоэлементами в CSS.

$("span").addClass("change");

Span.change:after { content: "bar" }

Хотя они отображаются браузерами через CSS, как если бы они были похожи на другие реальные элементы DOM, сами псевдоэлементы не являются частью DOM, потому что псевдоэлементы, как следует из названия, не являются реальными элементами, и поэтому вы не могут выбирать и манипулировать ими напрямую с помощью jQuery (или любых JavaScript-API, если не на самом деле Selectors API). Это относится к любым псевдоэлементам, стили которых вы пытаетесь модифицировать с помощью скрипта, а не только::before и::after .

Вы можете получать только стили псевдоэлементов непосредственно во время выполнения через CSSOM (думаю, window.getComputedStyle()), который не подвергается jQuery за пределами.css() , метод, который также не поддерживает псевдоэлементы.

Вы всегда можете найти другие пути вокруг него, хотя для Пример:

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

$("span.id-after:after{content:bar;}").appendTo($("head")); $("span").addClass("id-after");

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

Ответ должен быть Да & amp; Нет . Вы не можете выбрать элемент с помощью псевдоселектора, но вы можете добавить новое правило в таблицу стилей с помощью javascript.

Я сделал что-то, что должно сработать для вас:

Var addRule = function(sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets, "body:after", "content: "foo"");

::before

Вычисленный стиль в "before" был content: "VERIFY TO WATCH";

Вот мои две строки jQuery, в которых используется идея добавления дополнительный класс, который специально ссылается на этот элемент, а затем добавляет тег стиля (с важным тегом) для изменения CSS значения содержимого sudo-элемента:

$("span.play:eq(0)").addClass("G");

$("body").append(".G:before{content:"NewText" !important}");

Зачем добавлять классы или атрибуты, когда вы можете просто добавить style в голову

$("head").append(".span:after{ content:"changed content" }")

Здесь много ответов, но никакой ответ не помогает манипулировать css:before или:after , даже не принятым.

Вот как я предлагаю это сделать. Предположим, что ваш HTML выглядит следующим образом:

Test

И затем вы устанавливаете его: раньше в CSS и проектируете его так:

#something:before{ content:"1st"; font-size:20px; color:red; } #something{ content:"1st"; }

Обратите внимание, что я также установил content в самом элементе, чтобы вы могли легко вынести его позже. Теперь есть button щелчок по которому, вы хотите изменить цвет: до зеленого и его размер шрифта до 30 пикселей. Вы можете достичь этого следующим образом:

Определить css с вашим необходимым стилем в каком-то классе.activeS:

ActiveS:before{ color:green !important; font-size:30px !important; }

Теперь вы можете изменить: перед стилем, добавив класс в ваш: перед элементом следующим образом:

Change $("#changeBefore").click(function(){ $("#something").addClass("activeS"); });

Если вы хотите получить контент:before , это можно сделать как:

Get Content $("#getContent").click(function(){ console.log($("#something").css("content"));//will print "1st" });

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

Change var newValue = "22";//coming from somewhere var add = "#something:before{content:""+newValue+""!important;}"; $("#changeBefore").click(function(){ $("body").append(add); });

Нажатие на кнопку «changeBefore» изменит:before содержимое #something на «22», что является динамическое значение.

Надеюсь, это поможет

Вот способ доступа: свойства after и: before style, определенные в css:

// Get the color value of .element:before var color = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("color"); // Get the content value of .element:before var content = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("content");

$(".span").attr("data-txt", "foo"); $(".span").click(function () { $(this).attr("data-txt","any other text"); }) .span{ } .span:after{ content: attr(data-txt); }

Мы также можем полагаться на пользовательские свойства CSS (переменные) , чтобы манипулировать псевдоэлементом. Мы можем прочитать в спецификации , что:

Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с обычным наследованием и каскадными правилами, может быть обусловлено @media и другими условными правилами, может использоваться в атрибуте стиля HTML, может быть прочитан или задан с использованием CSSOM и т. д.

Учитывая это, идея состоит в том, чтобы определить пользовательское свойство внутри элемента и псевдоэлемент просто наследует его; таким образом, мы можем легко изменить его:

1) Использование встроенного стиля:

Box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }

2) Использование CSS и классы

Box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; } .blue { --color:blue; } .black { --color:black; }

3) Использование javascript

document.querySelectorAll(".box").style.setProperty("--color", "blue"); document.querySelectorAll(".box").style.setProperty("--color", "#f0f"); .box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }

4) Использование jQuery

$(".box").eq(0).css("--color", "blue"); /* the css() function with custom properties works only with a jQuery vesion >= 3.x with older version we can use style attribute to set the value. Simply pay attention if you already have inline style defined! */ $(".box").eq(1).attr("style","--color:#f0f"); .box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }

Он также может использоваться со сложными значениями:

Box { --c:"content"; --b:linear-gradient(red,blue); --s:20px; --p:0 15px; } .box:before { content: var(--c); background:var(--b); color:#fff; font-size: calc(2 * var(--s) + 5px); padding:var(--p); }

ЕСЛИ вы хотите полностью управлять элементами:: before или:: after sudo через CSS, вы можете сделать это JS. См. Ниже:

JQuery("head").append(" /* your styles here */ ");

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

Кстати, ваш элемент точно соответствует вашему желанию с помощью CSS с помощью JS.

Вы можете использовать мой плагин для этой цели.

Значения должны быть указаны, как в обычной функции jQuery.css

Кроме того, вы также можете получить значение параметра псевдоэлемента, как в обычной функции jQuery.css:

Console.log($(element).cssBefore(parameter));

Теперь в моем случае мне нужно было установить высоту элемента before, основанного на высоте другого, и он изменится при изменении размера, поэтому с помощью этого я могу запускать setHeight() каждый раз при изменении размера окна, и он заменит .

Надеюсь, это поможет кому-то, кто застрял в попытке сделать то же самое.