მეთოდი fadeOut

მეთოდი fadeOut ნაზად აქრობს ელემენტებს. ელემენტების ჩვენება შესაძლებელია მეთოდის fadeIn დახმარებით, გახადოს ისინი გაუმჭვირვალეები.

სინტაქსი

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

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

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

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

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

javascript.fadeOut();

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

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

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

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

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

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

მაგალითი

შემდეგ მაგალითში ღილაკზე დაჭერისას #hide ელემენტი #test დაიფარება მეთოდის fadeOut დახმარებით, ხოლო ღილაკზე #show - გამოჩნდება, fadeIn-ის დახმარებით. ასევე დავაყენებთ სიჩქარეს 1000მწმ-ზე:

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

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

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

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

მაგალითი

შემდეგ მაგალითში ანიმაციის დასრულების შემდეგ ელემენტის #test ჩვენებისას ჩვენ გამოვიტანთ შეტყობინებას ტექსტით '!', ხოლო დამალვისას ტექსტით '?':

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

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

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

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