jQuery හි animate ක්‍රමය

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

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

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

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

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

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

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

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

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

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

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

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

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