Плавна промяна на цвета на фона. Как да промените цвета на фона: след псевдо клас с jQuery? Jquery променя цвета

В този урок ще говорим за ефекта, при който фонът на обект се променя плавно в резултат на задържане на курсора на мишката върху него.
Първо, както вероятно вече сте свикнали (ако това не е първият ви път, когато използвате библиотеката jQuery), ние свързваме jQuery с нашия сайт.
В допълнение към самия jQuery, имаме нужда и от jQuery UI.

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

HTML

Ето пример за HTML маркиране.

Промяна на цвета на фона на елемент Анимация на промяна на цвета при задържане на мишката / компютърни игри / портал 2 Портал 2

Оригиналният портал вече е нещо култово и неочаквано за времето си. Това само за пореден път потвърждава изпитаната от времето теза за триумфа на идеите над напредналите технологии.

CSS

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

PNG); подравняване на текст: ляво; цвят:#333; ширина:800px; font-size:14px; font-family:georgia, "time new romances", serif; margin:0 auto; подплата:0; ) a( color:#333; text-decoration:none) a:focus (outline: none;) h1 (font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; междубуквени интервали:- 2px; цвят:#394BEA; тегло на шрифта:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; ) h2 (размер на шрифта: 24px; семейство шрифтове: verdana, helvetica, arial, sans- serif; цвят:#5C81CB; тегло на шрифта: 400; подложка: 0 0 10px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a(размер на шрифта:14px; семейство шрифтове:verdana, helvetica, arial , sans-serif; междубуквени интервали:-1px; цвят:#333; тегло на шрифта: 700; преобразуване на текст:главни букви; margin:0; padding:8px 0 8px 0; ) p ( color:#333; float: ляво; 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 ( цвят:#0066CC; float:left; преливане: скрит; позиция: роднина; ширина: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");

Анимацията на всеки следващ елемент от колекцията трябва да започва с известно забавяне след предишния.

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

За (вар. i = 0; i

Имайте предвид, че setTimeout() приема като първи параметър функция, която връща друга функция.

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

Използвайки вложена функция, ние копираме стойността на i при всяка итерация на цикъла, с помощта на която постигаме правилна работапланирано.

заключения

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