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

У цьому уроці йтиметься про ефект, при якому відбувається плавна зміна фону об'єкта в результаті наведення курсору миші на нього.
На початку, як вже напевно встигли звикнути (якщо ви не вперше використовуєте бібліотеку 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; serif;color:#5C81CB;font-weight:400;padding:0 0 10px;text-shadow:0 1px 1px #70C5ED; ) h3, h3 , sans-serif; letter-spacing:-1px; color:#333; font-weight: 700; text-transform:uppercase; margin:0; left;line-height:22px; margin:5px; padding:0 0 10px; ) #container ( margin: 0; padding: 0; ) .boxes ( background:#fff; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; 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; )

JS

DIV елемент, що має клас .boxes - є елементом, блоком, у якого ми хочемо змінити колір.
Ось цей код ми і будемо викликати в хедері.

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

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

Змінити колір (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 і так далі.

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

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

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

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

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

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

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

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

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

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

For (var i = 0; i

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

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

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

Висновки

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