მეთოდი fadeToggle

მეთოდი fadeToggle მონაცვლეობით ნაზად აჩვენებს ან ამალავს ელემენტებს, ანიმირებს მათ გამჭირვაობას.

სინტაქსი

ჩვენება/დამალვა მოცემულ დროში, 400მწმ ნაგულისხმევად:

.fadeToggle(ხანგრძლივობა);

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

.fadeToggle('slow' ან 'fast');

თუ პარამეტრები არ მიუთითებს - ანიმაცია არ მოხდება, ელემენტები გამოჩნდება/დამალული იქნება მყისიერად:

.fadeToggle();

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

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

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

.fadeToggle(ოფციები);

ასეთ ობიექტს შეუძლია გადასცეს შემდეგი პარამეტრები და ფუნქციები - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. აღწერა ამ პარამეტრებისთვის თქვენ შეგიძლიათ ნახოთ მეთოდისთვის animate. მაგალითად, დავაყენოთ ხანგრძლივობა და გლუვის ფუნქცია:

.fadeToggle( {duration: 800, easing: easeInSine} );

მაგალითი

შემდეგ მაგალითში პირველად ღილაკზე დაჭერისას #toggle ელემენტი #test-თან დამალული იქნება, ხოლო ხელახალი - გამოჩნდება. ამისთვის ჩვენ ვიყენებთ მეთოდს fadeToggle. ასევე ჩვენ დავაყენებთ სიჩქარეს 1000მწმ-ზე და გლუვის ფუნქციის მნიშვნელობას linear-ზე:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

იხილეთ ასევე

მეთოდი slideToggle,
რომელიც მონაცვლეობით ნაზად აჩვენებს/ამალავს ელემენტებს
მეთოდი fadeTo,
რომელიც ცვლის ელემენტების გამჭირვაობას
მეთოდი toggle,
რომელიც მონაცვლეობით ნაზად აჩვენებს/ამალავს ელემენტებს
მეთოდი animate,
რომელიც ანიმირებს ელემენტების თვისებებს