fadeOut մեթոդը

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

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

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

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

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

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

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

javascript.fadeOut();

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

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

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

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

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

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

Օրինակ

Հաջորդ օրինակում #hide կոճակը սեղմելիս #test տարրը կթաքնվի օգտագործելով fadeOut մեթոդը, իսկ #show կոճակը սեղմելիս՝ կցուցադրվի fadeIn մեթոդով: Նաև մենք կսահմանենք արագությունը 1000մվ:

html<button id="hide">թաքցնել</button>
<button id="show">ցուցադրել</button>
<div id="test"></div>

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

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

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

Օրինակ

Հաջորդ օրինակում անիմացիայի ավարտից հետո #test տարրը ցուցադրելիս մենք կարտածենք հաղորդագրություն '!' տեքստով, իսկ թաքցնելիս '?' տեքստով:

html<button id="hide">թաքցնել</button>
<button id="show">ցուցադրել</button>
<div id="test"></div>

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

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

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

Տես նաև