მეთოდი fadeTo

მეთოდი fadeTo შეუფერხებლად ცვლის გაუმჭვირვალობას ელემენტის მოცემულ მნიშვნელობამდე, დიაპაზონში 0-დან 1-მდე.

სინტაქსი

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

.fadeTo(ხანგრძლივობა, გაუმჭვირვალობის მნიშვნელობა);

დროის მითითება შესაძლებელია არა მხოლოდ მილიწამებში, არამედ საკვანძო სიტყვებით slow (600ms) და fast (200ms), რაც უფრო დიდია მნიშვნელობა, მით უფრო ნელია ანიმაცია:

.fadeTo('slow' ან 'fast', გაუმჭვირვალობის მნიშვნელობა);

ასევე შესაძლებელია მესამე (არასავალდებულო) პარამეტრად გადავცეთ callback-ფუნქცია - გაეშვება ანიმაციის შესრულების შემდეგ:

.fadeTo(ხანგრძლივობა, გაუმჭვირვალობის მნიშვნელობა, [callback-ფუნქცია]);

ასევე შესაძლებელია გადავცეთ გლუვი ფუნქცია და callback-ფუნქცია (არასავალდებულო პარამეტრები) - გაეშვება ანიმაციის შესრულების შემდეგ:

.fadeTo(ხანგრძლივობა, გაუმჭვირვალობის მნიშვნელობა, [გლუვი ფუნქცია], [callback-ფუნქცია]);

მაგალითი

შემდეგ მაგალითში, fadeTo მეთოდის დახმარებით ღილაკზე #hide დაჭერისას ელემენტი #test დამალული იქნება გაუმჭვირვალობის 0.5-მდე შემცირებით, ხოლო #show-ზე - გამოჩენილი:

<button id="hide">დამალვა</button>
<button id="show">გამოჩენა</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

იხილეთ აგრეთვე

მეთოდი fadeToggle,
რომელიც ცვლის ელემენტების გაუმჭვირვალობას
მეთოდი fadeIn,
რომელიც შეუფერხებლად აჩვენებს დამალულ ელემენტებს, რაც მათ გაუმჭვირვალებს
მეთოდი animate,
რომელიც ამოძრავებს ელემენტების თვისებებს