fadeOut մեթոդը

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

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

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

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

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

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

Եթե պարամետրերը չնշվեն՝ անիմացիա չի լինի, տարրերը կթաքնվեն ակնթարթորեն:

.fadeOut();

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

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

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

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

Նման օբյեկտը կարող է փոխանցել հետևյալ պարամետրերն ու ֆունկցիաները՝ duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always: Այս պարամետրերի նկարագրությունը դուք կարող եք տեսնել animate մեթոդի համար: Օրինակ, սահմանենք տևողությունն ու հարթության ֆունկցիան:

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

Տես նաև

fadeIn մեթոդը,
որը հարթ կերպով ցուցադրում է թաքնված տարրերը, դարձնելով դրանք անթափանց
hide մեթոդը,
որը հարթ կերպով թաքցնում է տարրերը
slideUp մեթոդը,
որը հարթ կերպով թաքցնում է տարրերը