FadeIn әдісі

fadeIn әдісі жасырылған элементтерді болаңдырақ көрсетеді, оларды мөлдір емес етеді. Элементтерді fadeOut әдісін қолданып жасыруға болады, оларды мөлдір етеді.

Синтаксис

Берілген уақыт ішінде көрсету, 400мс әдепкі бойынша:

javascript.fadeIn(ұзақтығы);

Уақытты тек миллисекундпен емес, сонымен қатар slow (600мс) және fast (200мс) кілт сөздерімен де көрсетуге болады, мән неғұрлым жоғары болса, анимация соғұрлым баяу болады:

javascript.fadeIn('slow' немесе 'fast');

Егер параметрлерді көрсетпесеңіз - анимация болмайды, элементтер лезде көрінеді:

javascript.fadeIn();

Сондай-ақ екінші параметр ретінде тегістік функциясын беруге болады, ал үшінші параметр ретінде callback-функциясын - анимация аяқталғаннан кейін орындалады. Екі параметр де міндетті емес:

javascript.fadeIn(ұзақтығы, [тегістік функциясы], [callback-функциясы]);

Әдіске әртүрлі опцияларды беруге болады, JavaScript нысаны түрінде, қамтитын кілт: мән жұптары:

javascript.fadeIn(options);

Мұндай нысан келесі параметрлер мен функцияларды бере алады - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Бұл параметрлердің сипаттамасын сіз әдіс үшін көре аласыз animate. Мысалы, ұзақтықты және тегістік функциясын орнатайық:

javascript.fadeIn( {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('?');
  });
});

Сондай-ақ қараңыз