Усули fadeIn

Усули fadeIn унсурҳои пинҳоншударо мутадовил намоиш медиҳад, онҳоро ғайришаффоф мекунад. Пинҳон кардани унсурҳо бо ёрии усули fadeOut имконпазир аст, онҳоро шаффоф мекунад.

Синтаксис

Намоиш дар муддати муайянкардашуда, 400мс ба сурати пешфарз:

.fadeIn(дарозӣ);

Вақтро на танҳо дар миллисония, балки бо калимаҳои калидии slow (600мс) ва fast (200мс) низ муайян кардан мумкин аст, қимати бузургтар анимацияро сусттар мекунад:

.fadeIn('slow' ё 'fast');

Агар параметрҳоро муайян накунед - анимация садо намезанад, унсурҳо фавран намоиш дода мешаванд:

.fadeIn();

Инчунин метавонед бо параметри дуюм функсияи таносубро гузоред, ва бо параметри сеюм callback-функсияро - пас аз иҷрои анимация кор мекунад. Ҳарду параметр ихтиёрӣ ҳастанд:

.fadeIn(дарозӣ, [функсияи таносуб], [callback-функсия]);

Ба усул гуногун имконҳоро додан мумкин аст, ба сурати объекти JavaScript, ки дар бар гирандаи ҷуфтҳои калид: қимат мебошад:

.fadeIn(options);

Чунин объект метавонад параметрҳо ва функсияҳои зеринро гузаронад - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Тавсифи ин параметрҳоро шумо метавонед барои усули animate бубинед. Масалан, дарозӣ ва функсияи таносубро муқаррар мекунем:

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

Намуна

Дар намунаи зерин ҳангоми пахш кардан ба тугмаи #hide унсури бо #test бо ёрии усули fadeOut пинҳон карда мешавад, ва ба тугмаи #show - намоиш дода мешавад, бо ёрии fadeIn. Ҳамчунин мо суръатро дар 1000мс муқаррар мекунем:

<button id="hide">пинҳон кардан</button>
<button id="show">намоиш додан</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000);
});

Намуна

Ва дар намунаи зерин пас аз поёни анимация ҳангоми намоиши унсури #test мо паёмеро бо матни '!' бароварда, ва ҳангоми пинҳон кардан бо матни '?':

<button id="hide">пинҳон кардан</button>
<button id="show">намоиш додан</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeIn(1000, function() {
		alert('!');
	});
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000, function() {
		alert('?');
	});
});

Инчунин бубинед

усули fadeOut,
ки унсурҳоро мутадовил пинҳон мекунад, онҳоро шаффоф мекунад
усули show,
ки унсурҳоро мутадовил намоиш медиҳад
усули slideDown,
ки унсурҳоро мутадовил намоиш медиҳад