fadeToggle մեթոդը

fadeToggle մեթոդը հերթով հարթ կերպով ցուցադրում կամ թաքցնում է տարրերը՝ անիմացիայի միջոցով փոխելով դրանց թափանցիկությունը:

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

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

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

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

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

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

.fadeToggle();

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

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

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

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

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