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

29.11.2020 Социальные сети

Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью 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) $(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 служит функция 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. Юзать всем для создания красивого эффекта плавного изменения цвета!

Есть ли способ выбрать / манипулировать псевдоэлементами 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() каждый раз при изменении размера окна, и он заменит .

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

sushiandbox.ru Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows.

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

Похожие публикации

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

Похожие публикации

Антенный усилитель DVB-T2 (ДМВ) своими руками

Пользуемся Hamachi для игры в Minecraft - установка и настройка Как пользоваться программой хамачи

Преобразование HTML-файла в текстовый документ MS Word