fadeTo մեթոդը

fadeTo մեթոդը հարթեցնում է փոխում է թափանցիկությունը տարրի տրված արժեքին, 0-ից մինչև 1 միջակայքում։

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

Տևողությունը և թափանցիկությունը նշվում են մեթոդի ցանկացած տարբերակ օգտագործելիս։ Թափանցիկության փոփոխությունը տրված ժամանակում, լռելայնով 400մս։

javascript.fadeTo(տևողություն, թափանցիկության արժեք);

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

javascript.fadeTo('slow' կամ 'fast', թափանցիկության արժեք);

Կարելի է նաև երրորդ (ոչ պարտադիր) պարամետրով փոխանցել callback-ֆունկցիա՝ կգործի անիմացիայի ավարտից հետո։

javascript.fadeTo(տևողություն, թափանցիկության արժեք, [callback-ֆունկցիա]);

Կարելի է նաև փոխանցել հարթեցման ֆունկցիա և callback-ֆունկցիա (ոչ պարտադիր պարամետրեր) - կգործի անիմացիայի ավարտից հետո։

javascript.fadeTo(տևողություն, թափանցիկության արժեք, [հարթեցման ֆունկցիա], [callback-ֆունկցիա]);

Օրինակ

Հաջորդ օրինակում, fadeTo մեթոդի միջոցով #hide կոճակը սեղմելիս #test տարրը կթաքնվի՝ նվազեցնելով թափանցիկությունը մինչև 0.5, իսկ #show-ի դեպքում՝ կցուցադրվի։

html<button id="hide">hide</button>
<button id="show">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').fadeTo(1000, 1);
});

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

Տես նաև

  • մեթոդը fadeToggle,
    որը փոխում է տարրերի թափանցիկությունը
  • մեթոդը fadeIn,
    որը հարթեցնում է ցույց է տալիս թաքնված տարրերը, դարձնելով դրանք անթափանց
  • մեթոդը animate,
    որը անիմացնում է տարրերի հատկությունները