fadeToggle әдісі

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

Синтаксис

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

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

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

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

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

javascript.fadeToggle();

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

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

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

javascript.fadeToggle(options);

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

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

Мысал

Келесі мысалда #toggle батырмасын бірінші рет басқанда #test элементі жасырылады, ал қайта басқанда - көрсетіледі. Ол үшін біз fadeToggle әдісін қолданамыз. Сонымен қатар біз жылдамдықты 1000мс деп және тегіс функциясының мәнін linear деп белгілейміз:

html<button id="toggle">toggle</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

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