Метод fadeIn

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

Синтаксис

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

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

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

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

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

javascript.fadeIn();

Шунингдек, иккинчи параметр сифатида силлиқлик функциясини, ва uchinchi параметр сифатида callback-функцияни - анимация тугаганидан кейин ишлайди. Ушбу параметрлар ихтиёрий:

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

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

javascript.fadeIn(options);

Бундай объект quyidagi параметрлар ва функцияларни uzatishi мумкин - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Бу параметрларнинг тавсифини сиз метод animate учун кўра оласиз. Масалан, давомлилик ва силлиқлик функциясини ўрнатамиз:

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

Мисол

Quyidagi мисолда тугмани босганда #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('?');
  });
});

Ҳам қаранг