ელემენტისთვის მითითებული გამჭვირვალობის დაყენება. გამჭვირვალობის შეცვლა JQuery Jquery გლუვი ცვლილების გამჭვირვალობა

jQuery Effects განმარტება და აპლიკაცია

jQuery .fadeTo() მეთოდი საშუალებას გაძლევთ შეცვალოთ არჩეული ელემენტების გამჭვირვალობის დონე.

.fadeTo() მეთოდი .fadeIn() მეთოდის მსგავსია, მაგრამ მისგან განსხვავებით, საშუალებას გაძლევთ გააკონტროლოთ ელემენტების გამჭვირვალობის სასურველი დონე.

jQuery სინტაქსი: 1.0 სინტაქსი: $(სელექტორი).fadeTo( ხანგრძლივობა, გაუმჭვირვალობა, სრული) ხანგრძლივობა- ნომერი, ან სტრიქონი გაუმჭვირვალობა- ნომერი (0 - 1) სრული- ფუნქციის სინტაქსი 1.4.3: $(selector).fadeTo( ხანგრძლივობა, გაუმჭვირვალობა, შემსუბუქება, სრული) ხანგრძლივობა- ნომერი, ან სტრიქონი გაუმჭვირვალობა- ნომერი (0 - 1) შემსუბუქება- სიმებიანი სრული- ფუნქცია დამატებულია jQuery 1.0-ში (სინტაქსი განახლებულია 1.4.3 ვერსიაში) პარამეტრის მნიშვნელობები პარამეტრის აღწერა

ხანგრძლივობა	სტრიქონი ან რიცხვითი მნიშვნელობა, რომელიც განსაზღვრავს რამდენ ხანს გაგრძელდება ანიმაცია. ნაგულისხმევი მნიშვნელობა არის 400 (მილიწამებში). სიმებიანი საკვანძო სიტყვები "სწრაფი" და "ნელი" შეესაბამება შესაბამისად 200 და 600 მილიწამს (მაღალი მნიშვნელობები მიუთითებს ნელ ანიმაციაზე, ქვედა მნიშვნელობები მიუთითებს სწრაფ ანიმაციაზე).
გაუმჭვირვალობა	რიცხვითი მნიშვნელობა შორის 0 და 1 ელემენტის გამჭვირვალობის მითითებით ( 1 - ელემენტი გაუმჭვირვალეა, 0.5 - საშუალო ღირებულება, 0 - ელემენტი სრულიად გამჭვირვალეა).
შემსუბუქება	საკვანძო სიტყვა (სტრიქონი), რომელიც განსაზღვრავს ანიმაციის სიჩქარის მრუდს (მათემატიკური ფუნქციის გამოყენებით - კუბური ბეზიეს მრუდი). გარე დანამატების გამოყენების გარეშე მხოლოდ ორი მნიშვნელობა აქვს - ხაზოვანი(ანიმაციის ეფექტი ერთი და იგივე სიჩქარით თავიდან ბოლომდე) და საქანელა(ანიმაციის ეფექტს აქვს ნელი დასაწყისი და ნელი დასასრული, მაგრამ სიჩქარე იზრდება ანიმაციის შუაში). ნაგულისხმევი მნიშვნელობა საქანელა.
სრული	ფუნქცია, რომელიც შესრულდება ანიმაციის დასრულების შემდეგ, ის გამოიძახება ერთხელ თითოეული შესატყვისი ელემენტისთვის. ფუნქციის შიგნით, ეს ცვლადი ეხება DOM ელემენტს, რომელზეც გამოიყენება ანიმაცია.

გამოყენების მაგალითი მაგალითი jQuery .fadeTo() მეთოდის გამოყენებით

div (ჩვენება: inline-block; სიგანე: 75 px; /* ელემენტის სიგანე */ სიმაღლე: 150 px; /* ელემენტის სიმაღლე */ margin-right: 20 px; /* მარჯვენა ზღვარი */ background-color: მწვანე; /* ფერადი ფონი */)

$("div").fadeTo(1000, 0.5, "წრფივი"); // წრფივად შეცვალეთ ელემენტების გამჭვირვალობა 0,5-მდე ერთ წამში ) );

) ); 0,5 Method.fadeTo() 1000 მილიწამები). გაითვალისწინეთ, რომ დამალული ელემენტი ჩანს, ამის თავიდან აცილება შესაძლებელია ხილვადობის თვისების გამოყენებით დამალული მნიშვნელობით, ან სელექტორების გამოყენებით, რომლებიც გავლენას არ ახდენენ საჭირო ელემენტებზე.

ჩვენი მაგალითის შედეგი:

განვიხილოთ შემდეგი მაგალითი, რომელშიც ჩვენ დავაყენეთ fadeTo() გამოძახების მეთოდი ფუნქციაზე:

jQuery .fadeTo() მეთოდის გამოყენების მაგალითი (დაბრუნების ფუნქციით)

div (ჩვენება: inline-block; /* block-line ელემენტები (ელემენტების დალაგება ხაზში) */ სიგანე: 75 px; /* ელემენტის სიგანე */ სიმაღლე: 150 px; /* ელემენტის სიმაღლე */ margin-right: 20 px; / * გარე სივრცე მარჯვნივ */ ფონის ფერი: წითელი /* ფონის ფერი */ )

$(document).ready(function ()( $(".fadeto ").click(function ()( // დააყენეთ ფუნქცია ელემენტზე დაწკაპუნებისას გადართვის კლასის var. რიცხ= 0; // ცვლადი (ელემენტის ნომრის ჩასართავად) $("div").fadeTo(500 , 0.4 , "წრფივი", ფუნქცია ()( // წრფივად შეცვალეთ ელემენტების გამჭვირვალობა 0.4-მდე ნახევარ წამში და გამოიძახეთ ფუნქცია. num++; //ცვლადის გაზრდა 1-ით (ნამატით) $(this).text( რიცხ); // დაამატეთ ცვლადი მნიშვნელობა იმ ელემენტს, რომელზეც გამოიყენება ანიმაცია) );

) ); 0,4 ) ); 500 Method.fadeTo()

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

ნახევარ წამში ( მილიწამები). გარდა ამისა, ანიმაციის დასრულების შემდეგ, ჩვენ ვუწოდებთ ფუნქციას, რომელიც ამატებს ცვლადის მნიშვნელობას თითოეულ ელემენტს. გაითვალისწინეთ, რომ ფუნქციის შიგნით, ეს ცვლადი ეხება DOM ელემენტს, რომელზეც გამოიყენება ანიმაცია, რაც საშუალებას გვაძლევს გავზარდოთ თითოეული ელემენტის ტექსტის შინაარსი სათითაოდ.და ჩვენი მაგალითის შედეგი.ამ სახელმძღვანელოში ჩვენ განვიხილავთ JQuery გამჭვირვალობის შეცვლის მაგალითს. მსგავსი თემები უკვე განიხილეს გაკვეთილზე, ისე, სცენარის მუშაობის პრინციპი ეფუძნებოდა მარტივ CSS html გაუმჭვირვალობა).

, ამ გაკვეთილში ასევე შევეხებით

JQuery

გარდა ამისა, იყო გამოსახულების მარტივი ცვლილება ჰოვერირებისას, გამჭვირვალობა ხდება დაუყოვნებლივ ( მე ვფიქრობ, რომ თქვენ უკვე უყურეთ ორ დემოს და გაიგეთ განსხვავება, თუ როგორ მუშაობს სკრიპტები. მოდით ახლა გადავხედოთ ამ გაკვეთილის კოდს..

პირველი ნაბიჯი. HTML. ასე რომ, ჩვენ გვაქვს ფაილი.

index.php მასში, პირველ რიგში, ჩვენ ვრთავთ jquery.js ბიბლიოთეკას. ჩამოტვირთეთ იგი თქვენთვის და დააკავშირეთ იგი ტეგებს შორისთავი შემდეგ ჩვენ გადავხედავთ JQyery შემდეგ ჩვენ გადავხედავთკოდი, რომელიც ურთიერთქმედებს კლასთან 50% თავდაპირველ მდგომარეობაში. ანუ გამოსახულებას მასზე მითითების გარეშე ნახევარი გამჭვირვალობა აქვს. შემდეგ, როდესაც სურათზე ჰოვერის მოქმედება შესრულდება, ფუნქციას უწოდებენ, რომელიც ცვლის კლასის პოზიციას შემდეგ ჩვენ გადავხედავთდე-გაუმჭვირვალე პოზიციამდე. სურათის დამიზნების დასრულების შემდეგ, ფუნქცია გადადის თავდაპირველ საწყის პოზიციაზე. გამოსახულების გამჭვირვალობის ატრიბუტი გაუმჭვირვალობა. თქვენ შეგიძლიათ დეტალურად შეისწავლოთ იგი დოკუმენტაციაში მილიწამები). გარდა ამისა, ანიმაციის დასრულების შემდეგ, ჩვენ ვუწოდებთ ფუნქციას, რომელიც ამატებს ცვლადის მნიშვნელობას თითოეულ ელემენტს. გაითვალისწინეთ, რომ ფუნქციის შიგნით, ეს ცვლადი ეხება DOM ელემენტს, რომელზეც გამოიყენება ანიმაცია, რაც საშუალებას გვაძლევს გავზარდოთ თითოეული ელემენტის ტექსტის შინაარსი სათითაოდ..

$(function() ( // დააყენეთ გამოსახულების გამჭვირვალობა 50%-ზე $(".img").css("გაუმჭვირვალობა","0.5"); // გადაიტანეთ მაუსი სურათზე $(".img"). hover( ფუნქცია () ( // რის შემდეგაც გამჭვირვალობა ქრება $(this).stop().animate(( გამჭვირვალობა: 1.0 ), "ნელი"); ), // მაუსის ამოღების შემდეგ გამოსახულების ფუნქციაზე () ( // გამჭვირვალობა უბრუნდება საწყის პოზიციას 50% $(this).stop().animate(( opacity: 0.5), "slow" ));

მეორე ნაბიჯი. CSS სტილის ფაილი.

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

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

სურათები ( კონტური: 1px მყარი #363636; სიგანე: 300px; ფონის ფერი: #2d2d2d; padding: 8px; )

სკრიპტი თავის მხრივ მარტივია, რაც მას უფრო აქტუალურს ხდის გამოსახულების გამჭვირვალობის ცვლილებების გამოყენებისას hover-ზე. გირჩევ ითამაშო მასში, პირველ რიგში, ჩვენ ვრთავთ jquery.js ბიბლიოთეკას. ჩამოტვირთეთ იგი თქვენთვის და დააკავშირეთ იგი ტეგებს შორისკოდი, სადაც არის სამი ფუნქცია: საწყისი, ჰოვერირებისას და ამოღებისას. შესაძლებელი იქნება მრავალფეროვნების ჩვენება. ვთქვათ საწყის პოზიციაზე მიუთითეთ გამჭვირვალობა 0.5, ჰოვერზე გამჭვირვალობა 1.0, და ხელმძღვანელობის მოხსნიდან გამჭვირვალობა 0.2. ეს გამოიწვევს რამდენიმე ძალიან საინტერესო მოქმედებას სურათთან ერთად!

თანამედროვე ვებ გვერდებზე ანიმაცია უკვე დიდი ხანია გახდა რაღაც მიჩნეული. ელემენტების დაშლა, ამომხტარი შეტყობინებები, მოცურების სურათების გალერეები აუმჯობესებს მომხმარებლის გამოცდილებას და ზრდის საიტის მუშაობას. პოპულარულ jQuery Javascript ბიბლიოთეკაში, fadeIn() არის ანიმაციის ერთ-ერთი ძირითადი ფუნქცია. ის აკონტროლებს ბლოკების გამჭვირვალობას.

ქრება ეფექტები

FadeIn() მეთოდი უზრუნველყოფს, რომ მასზე გადაცემული ელემენტის გამჭვირვალობა იცვლება 100%-მდე. jQuery ბიბლიოთეკაში ის დაწყვილებულია fadeOut() ფუნქციასთან, რომლითაც შეგიძლიათ გადატვირთოთ გამჭვირვალობა და ამით „დაშალოთ“ ელემენტი.

შეიძლება დაგაინტერესოთ:

მსგავსი ეფექტის მიღწევა შესაძლებელია fadeTo() მეთოდის გამოყენებით, რომლის გავლენის დიაპაზონი კიდევ უფრო ფართოა. FadeTo()-ს შეუძლია დააყენოს გამჭვირვალობის ნებისმიერი მნიშვნელობა 0-დან 1-მდე.

მეთოდის სინტაქსი

jQuery-ის fadeIn() მეთოდი გამოიძახება იმ ელემენტის კონტექსტში, რომლის გამჭვირვალობა უნდა შეიცვალოს. შეიძლება მიიღოს ნულიდან სამ პარამეტრამდე:

ელემენტი.fadeIn(); ელემენტი.fadeIn(ხანგრძლივობა); element.fadeIn(ხანგრძლივობა, გამოძახება); element.fadeIn(ხანგრძლივობა, შემსუბუქება, გამოძახება); ელემენტი.fadeIn(config);

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

"სწრაფი" (200 ms);
"ნელი" (600ms);

თუ ხანგრძლივობა არ არის დაყენებული, ის ნაგულისხმევად იქნება 400 მილიწამი.

გამოძახების პარამეტრი აღნიშნავს ფუნქციას, რომელიც გამოიძახება ანიმაციის დასრულებისთანავე. გამოძახების ფუნქცია არ იღებს რაიმე პარამეტრს. ეს ცვლადი მის შიგნით ეხება DOM კვანძის შეცვლას.

განმუხტვის არგუმენტი აკონტროლებს ანიმაციის დროის ფუნქციას, ანუ მის სიჩქარეს დროის მიხედვით. მისი დახმარებით შეგიძლიათ დააჩქაროთ ანიმაციის დასაწყისი და შეანელოთ დასასრული ან გახადოთ იგი ერთგვაროვანი. არგუმენტის მნიშვნელობა არის სტრიქონი, რომელიც შეიცავს საკვანძო სიტყვას და ნაგულისხმევია "swing" ფუნქცია.

შემდეგ მაგალითში jQuery fadeIn() თანდათან გაზრდის .block კლასის ელემენტის გამჭვირვალობას ერთი წამით, რის შემდეგაც ის დაბეჭდავს შეტყობინებას კონსოლში:

$(".block").fadeIn(1000, linear, function() ( console.log("ანიმაცია დასრულებულია"); ));

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

გამოძახების ფუნქციები

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

const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(".ელემენტი").fadeIn(1000); გამოძახება();

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

იმისათვის, რომ ყველაფერი ისე იმუშაოს, როგორც დაგეგმილი იყო, თქვენ უნდა გამოიყენოთ გამოძახების არგუმენტი ანიმაციის დასასრულის დასაჭერად:

const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(.element").fadeIn(1000, გამოძახება);

ახლა შეტყობინება დაიბეჭდება კონსოლზე მხოლოდ მაშინ, როდესაც ელემენტი სრულად ჩანს.

სრული გამჭვირვალობა და ელემენტის დამალვა

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

აქედან გამომდინარე, jQuery ბიბლიოთეკის fade მეთოდები fadeIn(), fadeTo() და fadeOut() მუშაობს გამჭვირვალობით ჩვენების თვისებასთან ერთად. სრულად გამჭვირვალე ელემენტი დამალულია ეკრანის გამოყენებით: არცერთი წესი და სანამ გამოჩნდება, ეს წესი გაუქმებულია.

ბოლო განახლება: 11/1/2015

გამჭვირვალობის ეფექტები საშუალებას გვაძლევს შეუფერხებლად შევცვალოთ ელემენტის გამჭვირვალობა, დავმალოთ ან ვაჩვენოთ. გამჭვირვალობის ეფექტები ხორციელდება fadeOut() , fadeIn() , fadeTo() და fadeToggle() მეთოდების გამოყენებით.

FadeOut() , fadeIn() და fadeToggle() მეთოდებს აქვთ მსგავსი გამოყენება:

fadeOut/fadeIn/fadeToggle(): მეთოდი პარამეტრების გარეშე

fadeOut/fadeIn/fadeToggle( [, შემსუბუქება][, დასრულება]) . ხანგრძლივობა პარამეტრი განსაზღვრავს რამდენ ხანს გაგრძელდება ელემენტის გამჭვირვალობის ცვლილება. ნაგულისხმევად მისი მნიშვნელობა არის 400 მილიწამი.

შემსუბუქების პარამეტრი, რომელიც იღებს ანიმაციის სიგლუვის ფუნქციის სახელს, როგორც სტრიქონს. ნაგულისხმევად მისი მნიშვნელობა არის "სვინგი". თქვენ ასევე შეგიძლიათ გამოიყენოთ "ნელი" და "სწრაფი" მნიშვნელობები, რომლებიც შეესაბამება ეფექტის ხანგრძლივობას 600 და 200 მილიწამში.

სრული პარამეტრი წარმოადგენს გამოძახების ფუნქციას, რომელიც გამოიძახება ანიმაციის დასრულებისას.

FadeTo მეთოდი, სხვა მეთოდებისგან განსხვავებით, ასევე იღებს გამჭვირვალობის პარამეტრს - ის იღებს მნიშვნელობას, რომლითაც უნდა შეიცვალოს ელემენტის გამჭვირვალობა: fadeTo(ხანგრძლივობა, გამჭვირვალობა [, შემსუბუქება][, სრული]). გამჭვირვალობის მნიშვნელობა მერყეობს 0-დან (სრულიად გამჭვირვალე) 1-მდე (სრულად ხილული).

ვთქვათ, გვაქვს სურათი გვერდზე და ორი ღილაკი, რომელიც შეცვლის ამ სურათის გამჭვირვალობას:

დამალვის ჩვენება $(function() ( $("#ars").fadeTo(2000,0.6); $("#fadeIn"). დააწკაპუნეთ(function())($("#ars").fadeIn("ნელი " , function())(alert("აჩვენა");)); $("#fadeOut"). დააწკაპუნეთ(function())($("#ars").fadeOut(2000, ფუნქცია())(გაფრთხილება ("დამალული");));

გაითვალისწინეთ, რომ FadeIn მეთოდი ზრდის გამჭვირვალობას იმ მნიშვნელობამდე, რაც იყო FadeOut მეთოდის გამოყენებამდე და არა აუცილებლად 1-მდე. ანუ, ამ შემთხვევაში, რადგან დასაწყისში გამოყენებული იყო fadeTo მეთოდი და გამჭვირვალობა შეიცვალა 0.6-მდე, მაშინ FadeIn მეთოდი გაზრდის გამჭვირვალობას 0.6-მდე.

ქრება ეფექტები

მეთოდის სინტაქსი

"სწრაფი" (200 ms);
"ნელი" (600ms);

თუ ხანგრძლივობა არ არის დაყენებული, ის ნაგულისხმევად იქნება 400 მილიწამი.

შემდეგი fadeIn() თანდათან გაზრდის ელემენტის გამჭვირვალობას კლასის .block-ით ერთი წამით, რის შემდეგაც იგი დაბეჭდავს შეტყობინებას კონსოლში:

$(".block").fadeIn(1000, linear, function() ( console.log("ანიმაცია დასრულებულია"); ));

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

გამოძახების ფუნქციები

Const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(".ელემენტი").fadeIn(1000); გამოძახება();

Const callback = function() ( console.log("ანიმაცია დასრულებულია"); ); $(.element").fadeIn(1000, გამოძახება);

სრული გამჭვირვალობა და ელემენტის დამალვა

აქედან გამომდინარე, jQuery ბიბლიოთეკის fade მეთოდები fadeIn(), fadeTo() და fadeOut() მუშაობს გამჭვირვალობით ჩვენების თვისებასთან ერთად. სრულად გამჭვირვალე ელემენტი დამალულია ეკრანის გამოყენებით: არცერთი წესი და სანამ ის გამოჩნდება, ეს წესი გაუქმებულია.

ყველაფერი მობილური ტექნოლოგიების შესახებ

დაკავშირებული სტატიები