fadeToggle әдісі

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

Синтаксис

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

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

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

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

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

.fadeToggle();

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

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

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

.fadeToggle(options);

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

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

Мысал

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

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

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

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

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

slideToggle әдісі,
ол элементтерді бәсеңдеп көрсету/жасыруды кезектестіреді
fadeTo әдісі,
ол элементтердің мөлдірлігін өзгертеді
toggle әдісі,
ол элементтерді бәсеңдеп көрсету/жасыруды кезектестіреді
animate әдісі,
ол элементтердің қасиеттерін анимициялайды