jQuery හි animate ක්‍රමය

පෙර පාඩම්වලදී අපි විමර්ශනය කළ සියලු ක්‍රම තරමක් සීමා සහිතයි - ඒවා නිර්මාණය කර ඇත්තේ නිශ්චිතව කිරීම සඳහාය. ඔබට සජීවිකරණය පාලනය කිරීමට තවත් පාලනයක් අවශ්‍ය නම් - විශ්වීය ක්‍රමය animate භාවිතා කරන්න.

මෙම ක්‍රමය පළමු පරාමිතිය ලෙස වස්තුවක් භාවිතා කරයි, එහිදී ඔබ සජීවිකරණය කිරීමට අවශ්‍ය CSS ගුණාංගවල නව අගයන් නියම කළ යුතුය. සහ දෙවන පරාමිතිය ලෙස - සජීවිකරණය ක්‍රියාත්මක කිරීමේ කාලය.

පහත HTML කේතයේ මෙම ක්‍රමය ක්‍රියාත්මක කරමු:

<button id="button">මාව ක්ලික් කරන්න</button>
<div id="elem">පාඨ...</div>

CSS මෙසේ පෙනෙනු ඇතැයි සිතමු:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

බොත්තම ක්ලික් කළ විට මූලද්‍රව්‍යය පහත ප්‍රමාණයට කුඩා වන ආකාරයට කරමු: උස - 50px, පළල - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

මෙම ආකෘතියෙන් අගයක් සඳහන් කළහොත් height: '+=50', සජීවිකරණය ක්‍රියා කරනු ඇත මෙසේය: වර්තමාන උස අගයට එකතු වේ 50px (අපගේ නඩුවේදී) සහ මූලද්‍රව්‍යය නව අගය දක්වා සිනිඳුව සජීවිකරණය වේ. උදාහරණයක් බලමු:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate ක්‍රමය පිළිබඳ වැඩි විස්තර jQuery විමර්ශන පොතේ බලන්න.

animate

පහත දක්වා ඇති වියළනයක් ඇත:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block සහිත div එක මත ක්ලික් කළ විට එහි පළල 200px දක්වා වැඩි වන ලෙස කරන්න, එය 1100ms කාලයකින් සිදුවිය යුතුය.

පළමු කාර්යයෙන් වියළනය භාවිතා කරන්න. කරන්න එනමුදු, සෑම අවස්ථාවකම #block සහිත div එක මත ක්ලික් කළ විට එහි පළල 200px කින් වැඩි වන අතර සෑම එවැනි වැඩිවීමක්ම 900ms කාලයකින් සිදු විය යුතුය.

පළමු කාර්යයෙන් වියළනය භාවිතා කරන්න. කරන්න එනමුදු, සෑම අවස්ථාවකම #block සහිත div එක මත ක්ලික් කළ විට එහි පළල සහ උස 100px කින් වැඩි වන අතර සෑම එවැනි වැඩිවීමක්ම 950ms කාලයකින් සිදු විය යුතුය.

පළමු කාර්යයෙන් වියළනය භාවිතා කරන්න. කරන්න එනමුදු, සෑම අවස්ථාවකම #block සහිත div එක මත ක්ලික් කළ විට, එය දකුණට 100px කින් ගමන් කරන අතර සෑම එවැනි ගමන් කිරීමක්ම 700ms කාලයකින් සිදු විය යුතුය.