Ефект чергується перетікання кольору. Плавна зміна кольору фону Jquery плавну зміну кольору

Ідея дуже проста і зрозуміла ... Припустимо, що хочемо зміну кольору фону сторінки при прокручуванні кожних 500px від верху. На жаль знайти готовий простий варіант, піддається модернізації, не вдалося знайти. Тому спільно з @only_darkangel був написаний елементарний варіант:

Спершу підключимо бібліотеки в head, якщо вони ще не підключені

Потім пару рядків стилів

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

демо роботи скрипта. Як бачимо все гранично просто і зрозуміло, але і в той же час примітивно.

Ще я знайшов варіант більш красивий, але і складний http://jsfiddle.net/jguffey/mxkx9j2o/ , Можливо так само стане в нагоді.

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

Є шар з текстом і кнопка при натисканні на яку потрібно поміняти колір тексту у цього шару.

Якось, зіткнувшись з необхідністю написати ефект перетікання тексту з одного кольору в інший, несподівано з'ясував для себе, що це не така вже й тривіальна задача.

Залишити галочку можна тільки навпаки Effects Core. Саме цей модуль розширює потрібний нам метод jQuery.animate (), досить просто підключити завантажену збірку:

Після цього для анімації доступні колір тексту, рамки або тла будь-якого елементу сторінки.

Крок 2. Затримка між анімацією елементів.

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

Припустимо у нас є колекція елементів нумерованого списку:

Var $ elements \u003d $ ( "ol\u003e li");

Анімація кожного наступного елемента колекції повинна починатися з певною затримкою після попередньої.

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

For (var i \u003d 0; i

Зверніть увагу, що в setTimeout () першим параметром передається функція, яка повертає іншу функцію.

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

Використовуючи вкладену функцію ми тим самим копіюємо значення i на кожній ітерації циклу, за допомогою чого добиваємося коректної роботи задуманого.

висновки

Використовувати таку анімацію можна, наприклад, щоб показати, що в якомусь списку параметрів потрібно обов'язково вибрати хоча б один або просто для привернення уваги до якогось блоку сторінки.

Чи є спосіб вибрати / маніпулювати псевдоелементи 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 \u003d (before: function (elem, attr) (if ($ ( "# cust_style")! \u003d\u003d undefined) ($ ( "body"). Append ( "");) Else ($ (" # cust_style "). Remove (); $ (" body "). Append ("");)), After: function (elem, attr) (if ($ (" # cust_style ")! \u003d\u003d undefined) ($ (" body "). Append ("");) Else ($ (" # cust_style "). Remove (); $ (" body "). Append (""); } } }

це додавання в даний час додає елемент або додає елемент 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 ( "");)); $ (" # Duop "). On (" click ", function (e) ($ (" head "). Append (""); 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%;)

Ви можете створити фальшиве властивість або використовувати існуючий і успадковувати його в таблиці стилів псевдоелемента.

var switched \u003d false; // Enable color switching setInterval (function () (var color \u003d switched? "Red": "darkred"; var element \u003d document.getElementById ( "arrow"); element.style.backgroundColor \u003d color; // Managing pseudo-element "s css // using inheritance. element.style.borderLeftColor \u003d color; switched \u003d! switched;) 1000); .arrow (/ * SET FICTIONAL PROPERTY * / border-left-color: red; background-color: red; width: 1em; height: 1em; display: inline-block; position: relative;) .arrow: after (border-top: 1em solid transparent; border-right: 1em solid transparent; border-bottom: 1em solid transparent; border- left: 1em solid transparent; / * INHERIT PROPERTY * / border-left-color: inherit; content: ""; width: 0; height: 0; position: absolute; left: 100%; top: -50%;)

Здається, що це не працює для властивості content: (

Ви не можете вибирати псевдо елементи в jQuery, тому що вони не є частиною DOM. Але ви можете додати певний клас до елементу батька і управляти його псевдоелементи в CSS.

Span.change: after (content: "bar")

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

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

Ви завжди можете знайти інші шляхи навколо нього, хоча для Приклад:

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

$("") .AppendTo ($ (" head ")); $ (" span "). AddClass (" id-after ");

Я вже відповів на це питання, але, щоб бути супер-крутим, я повторюся для вас.

Відповідь має бути Так & amp; немає. Ви не можете вибрати елемент за допомогою псевдоселектора, але ви можете додати нове правило в таблицю стилів за допомогою javascript.

Я зробив щось, що має спрацювати для вас:

Var addRule \u003d 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" був content: "VERIFY TO WATCH";

Ось мої два рядки jQuery, в яких використовується ідея додавання додатковий клас, який спеціально посилається на цей елемент, а потім додає тег стилю (з важливим тегом) для зміни CSS значення вмісту sudo-елемента:

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

$ ( "Body"). Append ( "");

Навіщо додавати класи або атрибути, коли ви можете просто додати style в голову

$ ( "Head"). Append ( "")

Тут багато відповідей, але ніякої відповіді не допомагає маніпулювати css: before або: after, навіть не прийнятим.

Ось як я пропоную це зробити. Припустимо, що ваш HTML виглядає наступним чином:

І потім ви встановлюєте його: раніше в 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

Якщо ви хочете отримати контент: before, це можна зробити як:

Get Content

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

Change

Натискання на кнопку «changeBefore» змінить: before вміст #something на «22», що є динамічне значення.

Надіюсь це допоможе

Ось спосіб доступу: властивості after і: before style, певні в css:

// Get the color value of .element: before var color \u003d window.getComputedStyle (document.querySelector ( ". Element"), ": before"). GetPropertyValue ( "color"); // Get the content value of .element: before var content \u003d 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\u003e \u003d 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 ( "");

Зверніть увагу, що елемент