fadeIn մեթոդը

fadeIn մեթոդը հարթ կերպով ցույց է տալիս թաքնված տարրերը՝ դարձնելով դրանք անթափանց։ Տարրերը թաքցնելու համար կարելի է օգտագործել fadeOut մեթոդը՝ դարձնելով դրանք թափանցիկ։

Շարահյուսություն

Ցուցադրում տվյալ ժամանակում, լռելյայն 400մվ:

.fadeIn(տևողություն);

Ժամանակը կարելի է սահմանել ոչ միայն միլիվայրկյաններով, այլև slow (600մվ) և fast (200մվ) բանալի բառերով, որքան մեծ է արժեքը, այնքան դանդաղ է անիմացիան.

.fadeIn('slow' կամ 'fast');

Եթե պարամետրերը չնշվեն, անիմացիա չի լինի, տարրերը կցուցադրվեն ակնթարթորեն.

.fadeIn();

Կարելի է նաև երկրորդ պարամետրով փոխանցել հարթության ֆունկցիան, իսկ երրորդով՝ callback-ֆունկցիան, որը կգործարկվի անիմացիայի ավարտից հետո. Երկու պարամետրերը ընտրովի են.

.fadeIn(տևողություն, [հարթության ֆունկցիա], [callback-ֆունկցիա]);

Կարելի է մեթոդին փոխանցել տարբեր ընտրանքներ, JavaScript օբյեկտի տեսքով, որը պարունակում է բանալի: արժեք զույգեր.

.fadeIn(ընտրանքներ);

Նման օբյեկտը կարող է փոխանցել հետևյալ պարամետրերն ու ֆունկցիաները՝ 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">hide</button>
<button id="show">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">hide</button>
<button id="show">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 մեթոդը,
որը հարթ կերպով ցույց է տալիս տարրերը