მეთოდი fadeToggle

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

სინტაქსი

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

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

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

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

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

javascript.fadeToggle();

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

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

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

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

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

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

მაგალითი

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

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

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

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

იხილეთ ასევე