Метод fadeOut

Метод fadeOut элементларни мулким йўқ қилади. Элементларни кўрсатиш учун fadeIn методидан фойдаланиб, уларни оппа-очик кўрсатиш мумкин.

Синтаксис

Белгиланган вақтда кўрсатиш, 400мс сустки холда:

javascript.fadeOut(давомлилик);

Вақтни фақат миллисонияларда эмас, балки калит сўзлар slow (600мс) ва fast (200мс) билан хам белгилаш мумкин, қиймат катта бўлса, анимация секинрок бўлади:

javascript.fadeOut('slow' ёки 'fast');

Агар параметрларни кўрсатмасангиз - анимация бўлмайди, элементлар дариҳол йўқ бўлади:

javascript.fadeOut();

Шунингдек, иккинчи параметр сифатида мулкимлик функциясини, ва учинчи параметр сифатида callback-функцияни - анимация бажарилганидан сўнг ишлайди. Иккала параметр хам мажбурий эмас:

javascript.fadeOut(давомлилик, [мулкимлик функцияси], [callback-функция]);

Методга турли опцияларни бериш мумкин, JavaScript объекти шаклида, ўз ичига олган калит: қиймат жуфтлари:

javascript.fadeOut(options);

Бундай объект куйидаги параметрлар ва функцияларни узтатиши мумкин - 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">hide</button>
<button id="show">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">hide</button>
<button id="show">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('?');
  });
});

Шунингдек қаранг