Мазна промена на бојата на позадината. Како да ја смените бојата на позадината: по псевдо-класа со jQuery? Jquery ја менува бојата

Во оваа лекција ќе зборуваме за ефектот во кој позадината на објектот непречено се менува како резултат на лебдење на курсорот на глувчето над него.
Прво, како што веројатно веќе сте се навикнале (ако ова не ви е прв пат да ја користите библиотеката jQuery), го поврзуваме jQuery на нашата страница.
Покрај самиот jQuery, потребен ни е и jQuery UI.

Ако сте запознаени со принципите на jQuery, треба да запомните дека во заглавјето мора да го поставиме кодот за повикот, во овој случај, анимацијата за промена на бојата, така што таа се вчитува пред да се вчита главната содржина на страницата. $(document).ready(function() ( // ставете го вашиот код за повик за анимација овде ));

HTML

Еве пример за означување на html.

Промена на бојата на заднината на елемент Анимација на промена на бојата на лебдењето / игри на компјутер / Портал 2 Портал 2

Оригиналниот портал е веќе култна работа и неочекувана за своето време. Тоа само уште еднаш ја потврдува временски проверената теза за триумфот на идеите над напредните технологии.

CSS

CSS стиловите за нашата страница изгледаат вака.

Png); текст-порамнување:лево; боја:#333; ширина: 800 пиксели; големина на фонтот: 14 px; font-family:georgia, „time new romances“, serif; маржа: 0 авто; баласт:0; ) a( боја:#333; текст-декорација: нема ) a:фокус ( преглед: нема; ) h1 (големина на фонтот: 34 px; фонт-семејство: verdana, helvetica, arial, sans-serif; проред на букви:- 2px; боја:#394BEA; тежина на фонтот:700; пополнување:20px 0 0; текст-сенка:0 1px 1px #70C5ED; ) h2 (големина на фонтот: 24px; фонт-семејство: verdana, helvetica, arial серија; боја:#5C81CB; тежина на фонтот: 400; пополнување: 0 0 10 px; текст-сенка: 0 1px 1px #70C5ED; ) h3, h3 a (големина на фонтот: 14 px; фонт-семејство: verdana, arialve , sans-serif; проред на букви: -1 px; боја: #333; тежина-фонт: 700; текст-трансформација: големи букви; маргина: 0; полнење: 8 px 0 8 px 0; ) p (боја:#333; плови: лево; висина на линија: 22 px; маргина: 5 px; полнење: 0 0 10 px; ) #контејнер ( маргина: 0; пополнување: 0; ) .кутии (заднина:#fff; граница: 1px солидна #cccc; float:лево; пополнување: 10 px; позиција: релативно; ширина: 600 px; ) img (работа: 5 px солидна #CCCCCC; ) div.info (граница-долу: 1px солидна #CCCCCC; плови: лево; маргина: 0; полнење: 0; ширина: 100%; ) .блок (боја:#0066CC; float:лево; претекување:скриен; позиција:роднина; ширина: 600 пиксели; ).

JS

DIV елемент со класата .boxes е елементот, блокот чија боја сакаме да ја промениме.
Ова е кодот што ќе го повикаме во заглавието.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Параметрите BackColor ја поставуваат бојата, а вредноста 800 е брзината на анимацијата.

Има слој со текст и копче, кога ќе кликнете на него, треба да ја смените бојата на текстот на овој слој.

Промени ја бојата (jQuery) $(документ).ready(function())( $("#color_change").кликни(function())($("#layer").css("боја", "#F00" );))))); #слој (граница:#CCC 1px солидна; линија-висина:1,5; пополнување:10px 20px; ширина: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");

Анимацијата на секој следен елемент од колекцијата треба да започне со одредено задоцнување по претходниот.

Можете да го постигнете саканиот резултат користејќи го следниов код:

За (var i = 0; i

Забележете дека setTimeout() зема како свој прв параметар функција која враќа друга функција.

Ако ова не е направено, тогаш променливата i ќе биде пренесена со референца и кога ќе дојде времето за извршување на функцијата на тајмерот, ќе ја имам нејзината последна вредност еднаква на $elements.length , бидејќи до овој момент циклусот for ќе заврши и анимацијата воопшто нема да се изврши.

Со помош на вгнездена функција, ја копираме вредноста на i при секое повторување на јамката, со чија помош постигнуваме правилна работапланирано.

заклучоци

Можете да користите таква анимација, на пример, за да покажете дека во некоја листа на параметри мора да изберете барем еден, или едноставно да привлечете внимание на некој блок од страницата.