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

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