animate ක්රමය
animate ක්රමය විවිධ CSS ගුණාංග සඳහා සජීවීකරණ ආචරණ නිර්මාණය කිරීමට ඉඩ සලසයි.
අනිවාර්ය පරාමිතිය එකක් පමණක් වන අතර එනම්, අපි css ක්රමයට සම්පාදනය කරන ආකාරයටම
CSS ගුණාංග සහිත වස්තුවකි. සංඛ්යාත්මක නොවන අගයන් හෝ බහු අගයන් ඇති බොහෝ ගුණාංග jQuery හි මූලික ක්රියාකාරීත්වය මගින් සජීවීකරණය කළ නොහැක
(උදාහරණයක් ලෙස background-color). එසේම, සංක්ෂිප්ත CSS ගුණාංග නාම සෑම විටම සහාය නොදක්වයි, උදාහරණයක් ලෙස
font - ඒ වෙනුවට fontSize හෝ font-size භාවිතා කළ යුතුය.
අගයන්ට පෙර '+=' හෝ '-=' යෙදිය හැකි අතර, එවිට පසුව දක්වා ඇති අගය එකතු කරනු ලබනු හෝ
ගුණයේ වර්තමාන අගයෙන් අඩු කරනු ලැබේ. එසේම, සංඛ්යාත්මක අගයන් වෙනුවට show, hide හෝ
toggle යෙදිය හැකිය. සියලු jQuery ආචරණ, animate ඇතුළුව, ගෝලීයව අක්රීය කළ හැකිය,
jQuery.fx.off = true සැකසුම භාවිතා කිරීමෙන්,
කාල සීමාවේ අගය 0 ලෙස සකසයි.
වාග් රීතිය
සජීවීකරණයේ පළමු පරාමිතිය ලෙස CSS ගුණාංග සහ ඒවායේ අගයන් යතුර: අගය ආකෘතියෙන් අඩංගු වස්තුවක් සම්පාදනය කරනු ලැබේ,
අප සජීවීකරණය කිරීමට අදහස් කරන ඒවා. ඉතිරි පරාමිති අනිවාර්ය නොවන ලෙස සැලකේ. දෙවන පරාමිතිය -
මිලි තත්පරවල සජීවීකරණයේ කාල සීමාව නිර්වචනය කරයි, පෙරනිමියෙන් එය 400ms වේ.
තුන්වන පරාමිතිය වන්නේ සංක්රමණය සඳහා සුමට ශ්රිතය (පෙරනිමියෙන් එය swing වේ),
සහ හතරවන - සජීවීකරණය සම්පූර්ණ කිරීමෙන් පසු ක්රියාත්මක වන callback ශ්රිතය:
.animate(ගුණාංග, [කාල සීමාව ], [සුමට ශ්රිතය ], [callback ශ්රිතය ]);
කාලය මිලි තත්පරවල පමණක් නොව, යතුරු වචන slow (600ms)
සහ fast (200ms) මගින්ද නියම කළ හැකිය, අගය අධික වන තරමට,
සජීවීකරණය නිශ්චල වේ.
දෙවන පරාමිතිය ලෙස ක්රමයට විවිධ විකල්ප,
යතුර: අගය යුගල අඩංගු JavaScript වස්තුවක ආකාරයෙන් සම්පාදනය කළ හැකිය:
.animate(ගුණාංග, options);
උදාහරණයක් ලෙස, CSS ගුණාංග width
සහ height සඳහා අගය toggle ලෙස සකසමු. කාල සීමාව
5000ms දක්වා, සුමට ශ්රිත වස්තුවක ආකාරයෙන් සම්පාදනය කරමු,
පළල සඳහා එය රේඛීය ශ්රිතයක් වනු ඇත, සහ
උස සඳහා - easeOutBounce වනු ඇත, එසේම
සජීවීකරණය අවසන් වූ පසු අපගේ ශ්රිතය
(complete යතුර බලන්න) එක් වරක් ක්රියාත්මක වේ,
එය #test සමඟ මූලද්රව්යයට පසුව
'Animation complete.' පෙළ සහිත div එකක් තබයි:
$('#test').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
පහත වගුවේ දැක්වෙන්නේ ගුණාංග සහ ක්රම
options වස්තුව සහ ඒවායේ විස්තරය:
| නම | විස්තරය |
|---|---|
duration |
මිලි තත්පරවල සජීවීකරණයේ කාල සීමාව - සම්ප්රකාශනය හෝ
අංකය. පෙරනිමියෙන් එය 400ms වේ.
|
easing |
කුමන සුමට ශ්රිතය භාවිතා කළ යුතුද යන්න නිර්වචනය කරයි.
පෙරනිමියෙන් එය swing වේ.
|
queue |
බූලියන් අගය හෝ සම්ප්රකාශනය. පෙරනිමියෙන් එය
true වේ. සජීවීකරණය පෝලිමට දැමිය යුතුද යන්න
දක්වයි. අගය false වූ විට
සජීවීකරණය වහාම ආරම්භ වේ. මෙම පරාමිතිය
සම්ප්රකාශනයක් ලෙස සම්පාදනය කළහොත්, සජීවීකරණය මෙම
පරාමිතිය නියෝජනය කරන පෝලිමට දමනු ලැබේ.
අභිරුචි නාමයක් සහිත පෝලිම භාවිතා කරන විට,
සජීවීකරණය ස්වයංක්රීයව ආරම්භ නොවේ, එය
ආරම්භ කිරීම සඳහා - dequeue('queuename') භාවිතා කරන්න.
|
specialEasing |
මෙහිදී ඔබට වස්තුවක් සම්පාදනය කළ හැකිය, එහි යතුරු CSS ගුණාංග වන අතර, අගයන් - ඒවාට අනුරූප සුමට ශ්රිත වේ. |
step |
සජීවීකරණය වන සෑම ගුණයකටම සහ සජීවීකරණය වන සෑම මූලද්රව්යයකටම කැඳවනු ලබන ශ්රිතය. එය
Tween වස්තුව වෙනස් කිරීමට ඉඩ සලසයි, එමගින් අගය
සකස් කිරීමට පෙර ගුණය වෙනස් කළ හැකිය.
පරාමිති ලෙස වර්තමාන tween අගය
සහ Tween වස්තුව පිළිගනී.
|
progress |
සජීවීකරණයේ සෑම පියවරකටම පසුව කැඳවනු ලබන ශ්රිතය,
සජීවීකරණය වන ගුණාංග ගණන නොසලකා එක් එක් මූලද්රව්යය සඳහා එක් වරක් පමණක්.
ශ්රිතය පරාමිති තුනක් පිළිගනී: animation (පොරොමිසයක ආකාරයෙන්),
progress (0 සිට 1 දක්වා අංකය)
සහ remainingMs (ඉතිරිව ඇති මිලි තත්පර ගණන).
|
complete |
මූලද්රව්යයේ සජීවීකරණය අවසන් වූ පසු එක් වරක් කැඳවනු ලබන ශ්රිතය.
ශ්රිතය animation (පොරොමිසයක ආකාරයෙන්) පිළිගනී.
|
start |
මූලද්රව්යයේ සජීවීකරණය ආරම්භ වන විට කැඳවනු ලබන ශ්රිතය.
ශ්රිතය animation (පොරොමිසයක ආකාරයෙන්) සහ
jumpedToEnd (බූලියන් අගය. එය
true නම්, සජීවීකරණය ස්වයංක්රීයව
අවසන් වේ) පිළිගනී.
|
done |
මූලද්රව්යයේ සජීවීකරණය අවසන් වන විට කැඳවනු ලබන ශ්රිතය
(එහි පොරොමිසය සාර්ථකව සම්පූර්ණ වී ඇත).
ශ්රිතය animation (පොරොමිසයක ආකාරයෙන්) සහ
jumpedToEnd (බූලියන් අගය. එය
true නම්, සජීවීකරණය ස්වයංක්රීයව
අවසන් වේ) පිළිගනී.
|
fail |
මූලද්රව්යයේ සජීවීකරණය දෝෂයක් සහිතව අවසන් වන විට කැඳවනු ලබන ශ්රිතය
(එහි පොරොමිසය දෝෂයක් සහිතව
සම්පූර්ණ වී ඇත). ශ්රිතය
animation (පොරොමිසයක ආකාරයෙන්) සහ
jumpedToEnd (බූලියන් අගය. එය
true නම්, සජීවීකරණය ස්වයංක්රීයව
අවසන් වේ) පිළිගනී.
|
always |
මූලද්රව්යයේ සජීවීකරණය අවසන් වන හෝ නතර වන විට කැඳවනු ලබන ශ්රිතය
(එහි පොරොමිසය සාර්ථකව හෝ
දෝෂයක් සහිතව සම්පූර්ණ වී ඇත).
ශ්රිතය animation (පොරොමිසයක ආකාරයෙන්) සහ
jumpedToEnd (බූලියන් අගය. එය
true නම්, සජීවීකරණය ස්වයංක්රීයව
අවසන් වේ) පිළිගනී.
|
උදාහරණය
අපි #left බොත්තම ක්ලික් කිරීමේදී,
කොළ චතුරස්රය වමට මාරු කරමු, සහ #right බොත්තම
දකුණට 50px ක් මාරු කරමු, එසේම කාල සීමාව
600ms දක්වා සකසමු - slow විධානය භාවිතා කරමින්:
<button id="left">වම</button>
<button id="right">දකුණ</button>
<div class="block"></div>
div {
position: absolute;
background-color: green;
left: 50px;
width: 100px;
height: 100px;
margin: 5px;
}
$('#right').click(function() {
$('.block').animate({'left': '+=50px'}, 'slow');
});
$('#left').click(function() {
$('.block').animate({'left': '-=50px'}, 'slow');
});
මෙයද බලන්න
-
showක්රමය,
මූලද්රව්ය සුමට ලෙස පෙන්වයි -
stopක්රමය,
ආරම්භ කළ සජීවීකරණය නතර කිරීමට ඉඩ සලසයි -
delayක්රමය,
සිදුවීම් ක්රියාත්මක කිරීමේ ප්රමාදය සකසයි -
jQuery.fx.offගුණය,
සජීවීකරණය ගෝලීයව අක්රීය කිරීමට ඉඩ සලසයි -
animatedතේරීම,
දැනට සජීවීකරණයේ නියුතු වූ මූලද්රව්ය තෝරා ගනී
