ახლა მოდით დავამატოთ გლუვი ცვლილება შრიფტის ფერს:

a.foo (padding: 5px 10px; ფონი: # 69f; ფერი: # 000; -webkit-transition: background 0.5s ease, color 0.3s ease;) a.foo:hover (ფონი: # 33f; ფერი: #fff ;)

მაუსის გადაადგილებისას, ეს კოდი შეუფერხებლად შეცვლის ფონის ფერს ნახევარი წამის განმავლობაში და შრიფტის ფერს 0.3 წამით. თუ ჩვენ გვინდა ყველა ელემენტის იგივე თვისებები, შეგვიძლია შევცვალოთ
-webkit-გარდამავალი: ფონზე 0.5s მარტივია;
-webkit-გარდამავალი: ფერი 0.3s სიმარტივე;

ჩართული
-webkit-გარდამავალი: ყველა 0.5s მარტივია;

ახლა გადასვლის ეფექტი გამოყენებული იქნება ყველა თვისებაზე, რომელიც იცვლება მოვლენაზე და იგივე პარამეტრებით - 0,5 წამი, მარტივი ეფექტი.

ჩვენ ასევე შეგვიძლია დაამატოთ შეფერხება ეფექტისთვის:

a.foo (შევსება: 5px 10px; ფონი: # 69f; ფერი: # 000; -wekkit- გადასვლა: ყველა 0.5s მარტივია; -webkit-გადასვლა-შეფერხება: 0.5 წმ;) a.foo:hover (ფონი: # 33f ფერი: #fff;)

ახლა ჩვენი ანიმაცია გადის ნახევარი წამი თაგვის გადაადგილების შემდეგ.

თქვენ შეგიძლიათ გამოიყენოთ გარდამავალი თვისება არაფერზე - ფონი, ფერი, სიგრძე, შრიფტის ზომა და ა. ძირითადად, ეს არის თვისებები, რომლებიც განსაზღვრავს ფერს ან თვისებებს, რომლებიც შეიძლება გამოიხატოს სიგრძის ერთეულებში (px, em, ex) ან პროცენტულად. ჩვენ ასევე შეგვიძლია გამოვიყენოთ: აქცენტი და: აქტიური ფსევდო კლასები, როგორც ღონისძიება. ზოგადად, თქვენ შეგიძლიათ გამოიყენოთ გადასვლა ნებისმიერ სელექტორთან.

დავალება

გამოსავალი

ბმულის ფერი დაყენებულია ფერის თვისების მეშვეობით, რომელიც ემატება სელექტორს A. : Hover ფსევდოკლასი გამოიყენება ბმულის ფერის შესაცვლელად, როდესაც მაუსის კურსორი გადაადგილდება მასზე და ფერის შეუფერხებლად შესაცვლელად, დაამატეთ გარდამავალი თვისება სელექტორ A- ს, რომლის მნიშვნელობა არის დრო. ეს ჩვეულებრივ მითითებულია წამებში ან მილიწამებში.

მაგალითი 1. ბმულების ფერის შეცვლა

მეგადროიდის აწყობა მოითხოვს ყუთის გახსნას, ჩიპების ტომარის ამოღებას და მათ სწორი თანმიმდევრობით დაკეცვას ჩვენი დეტალური 8631 გვერდიანი სახელმძღვანელოს გამოყენებით.

ამ მაგალითში, სიცხადისთვის, არჩეულია კონტრასტული ფერები და გადასვლის დრო დაყენებულია ერთ წამზე. სამუშაო ადგილზე, უმჯობესია დააყენოთ დრო ნაკლები, 0,6 წმ. ამიტომ შეარჩიეთ ღირებულება თქვენი გემოვნებისა და სურვილის მიხედვით.

დღეს ჩვენ გავარკვევთ როგორ გავაკეთოთ გლუვი ბლოკის ფერის შეცვლა CSS- ის გამოყენებითდა jQuery... ამ მოდულის საშუალებით შეგიძლიათ მიაღწიოთ საოცრად ლამაზი დიზაინის შედეგებს. მაგალითად, შეგიძლიათ გააკეთოთ მაგარი მენიუ, რომელიც შეუფერხებლად იცვლის ფერს ჰოვერზე და დამიჯერეთ, ძალიან ლამაზად გამოიყურება.

JQuery

პირველი, ტეგებს შორის და თქვენ უნდა განათავსოთ შემდეგი:

შემდეგ ისევ ტეგებს შორის დადააკოპირეთ ეს სკრიპტი აქ:

სად . ყუთი -ეს არის ბლოკის კლასი, რომელიც ჩვენ ზემოთ მოვიყვანეთ CSS– ში.

"# FF4500"- ფერი მოძრაობს 400 - ანიმაციის სიჩქარე მოძრაობისას.

"#Fffffff"- ორიგინალური ფერი კურსორის გადაადგილების შემდეგ. 400 - ანიმაციის სიჩქარე კურსორის გადაადგილებისას.

Html

მას შემდეგ რაც ყველაფერს გააკეთებთ როგორც ზემოთ აღწერილი, ბლოკის ფერი შეუფერხებლად შეიცვლება... გვერდზე ასეთი ბლოკის ჩასასმელად, თქვენ უბრალოდ უნდა დაამატოთ შემდეგი საჭირო ადგილას:

და ბლოკი გამოჩნდება.

Მნიშვნელოვანი

ამ მოდულს შეუძლია შეცვალოს მხოლოდ ფონის ფერი. მაგალითად, თქვენ ვერ შეძლებთ მის მიმაგრებას ბმულებზე ან ტექსტზე. ბმულების ფერი იცვლება სხვა მოდულით (მე აუცილებლად დავწერ როგორ გავაკეთო ეს მალე).

თუ გსურთ, რომ გვერდზე ბლოკები განსხვავებული ფერის იყოს, როგორც ჩემში, დაგჭირდებათ ტეგებს შორის დადააყენეთ რამდენიმე სკრიპტი ზედიზედ და, შესაბამისად, არ დაგავიწყდეთ ფერის შეცვლა სასურველზე. ყველაზე მნიშვნელოვანი არის კლასის შეცვლა, მაგალითად, ჩვენს ზემოთ მოცემულ მაგალითში, კლასი ყუთიდა შემდეგი სკრიპტი უნდა იყოს განსხვავებული კლასის მსგავსად ყუთი 1, მაშინ ყუთი 2და ა.შ.

Სულ ეს არის, ძვირფასო მეგობრებო... თუ ვერაფერი გაიგეთ, აუცილებლად ჰკითხეთ კომენტარებში. Მალე გნახავ.

ამ გაკვეთილზე ჩვენ ვისაუბრებთ იმ ეფექტზე, რომლის დროსაც ობიექტის ფონი შეუფერხებლად იცვლება მაუსის კურსორის მასზე გადაფრენის შედეგად.
დასაწყისში, როგორც თქვენ ალბათ უკვე შეეჩვიეთ (თუ ეს არ არის პირველი შემთხვევა jQueryბიბლიოთეკა), დაკავშირება jQuery v ჩვენი საიტი.
Თავისით jQuery, ჩვენ ასევე გვჭირდება jQuery ინტერფეისი.

თუ იცნობ პრინციპებს jQuery, მაშინ უნდა გვახსოვდეს, რომ სათაურში უნდა ჩავსვათ ზარის კოდი ამ საქმეს, ანიმაციური ფერის ცვლილება ისე, რომ ის იტვირთება გვერდის ძირითადი შინაარსის ჩატვირთვამდე. $ (დოკუმენტი) .ready (ფუნქცია () (// ჩადეთ თქვენი ანიმაციის ზარის კოდი აქ));

Html

აქ არის მარკირების მაგალითი html.

შეცვალეთ ელემენტის ფონის ფერი

ფერის შეცვლის ანიმაცია გადაადგილებისას

/ კომპიუტერული თამაშები / პორტალი 2

პორტალი 2

ორიგინალური პორტალი უკვე საკულტო ნივთია და თავის დროისთვის მოულოდნელი. ეს მხოლოდ კიდევ ერთხელ ადასტურებს მრავალსაუკუნოვან თეზას მოწინავე ტექნოლოგიებზე იდეების ტრიუმფის შესახებ.

CSS

ჩვენი გვერდის CSS სტილი ასე გამოიყურება.

Png); text-align: მარცხნივ; ფერი: # 333; სიგანე: 800 პიქსელი; შრიფტის ზომა: 14px; font-family: Georgia, "დრო ახალი რომაელები", serif; ზღვარი: 0 ავტო; ბალიში: 0; ) a (ფერი: # 333; ტექსტი-გაფორმება: არცერთი) a: ფოკუსი (მონახაზი: არცერთი;) h1 (შრიფტის ზომა: 34px; შრიფტის ოჯახი: verdana, helvetica, arial, sans-serif; წერილების ინტერვალი:- 2px; ფერი: # 394BEA; შრიფტის წონა: 700; შიგთავსი: 20px 0 0; ტექსტი-ჩრდილი: 0 1px 1px # 70C5ED;) h2 (შრიფტის ზომა: 24px; შრიფტი-ოჯახი: verdana,-arial, helvetic serif; ფერი: # 5C81CB; შრიფტის წონა: 400; შევსება: 0 0 10px; text-shadow: 0 1px 1px # 70C5ED;) h3, h3 a (font-size: 14px; font-family: verdana, helvetica, arial , sans-serif; ასოების დაშორება: -1px; ფერი: # 333; შრიფტის წონა: 700; ტექსტის ტრანსფორმაცია: დიდი; ზღვარი: 0; padding: 8px 0 8px 0;) p (ფერი: # 333; float: მარცხენა; ხაზის სიმაღლე: 22px; ზღვარი: 5px; padding: 0 0 10px;) #container (margin: 0; padding: 0;). ყუთები (ფონი: #fff; საზღვარი: 1px მყარი #ccc; float: მარცხენა; padding: 10px; პოზიცია: ფარდობითი; სიგანე: 600px;) img (საზღვარი: 5px მყარი #CCCCCC;) div.info (საზღვრის ქვედა: 1px მყარი #CCCCCC; float: მარცხნივ; ზღვარი: 0; padding: 0; სიგანე: 100%;) .ბლოკი (კოლ r: # 0066CC; float: მარცხნივ; overflow: დამალული; პოზიცია: ნათესავი; სიგანე: 600px; ) .ბლოკი h4, .ბლოკი h4 a (ფერი: # 333333; შრიფტის ზომა: 11 პიქსელი; შიგთავსი: 5 პიქსელი 0; ტექსტი-ჩრდილი: 0 1პx 1პx #CEDEFD; ტექსტის ტრანსფორმაცია: დიდი;)

ჯს

DIVელემენტი, რომელსაც აქვს კლასი .ყუთები- არის ელემენტი, ბლოკი, რომელშიც გვინდა ფერის შეცვლა.
ჩვენ ამ კოდს დავარქმევთ სათაურში.

$ (დოკუმენტი) .ready (ფუნქცია () ($ (". ყუთები"). გადაიტანეთ (ფუნქცია () ($ (ეს) .stop (). animate ((ფონისფერი: "# 40B8FE"), 800);), ფუნქცია () ($ (ეს). გაჩერება (). ანიმაცია ((ფონის ფერი: "#ffffff"), 800);));)); პარამეტრებში ფონის ფერიდაყენებულია ფერი და მნიშვნელობა 800 არის ანიმაციის სიჩქარე.