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('?');
  });
});

Ошондой эле караңыз