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">жасыр</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('?');
  });
});

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