jQuery-ի animate մեթոդը

Բոլոր մեթոդները, որոնք մենք քննարկել ենք նախորդ դասերում, որոշ չափով սահմանափակ են. դրանք անում են հենց այն, ինչի համար ստեղծված են: Եթե Ձեզ անհրաժեշտ է ավելի շատ հսկողություն անիմացիայի վրա - օգտագործեք ունիվերսալ մեթոդը animate։

Առաջին պարամետրով այս մեթոդը ընդունում է օբյեկտ, որում պետք է նշել CSS հատկությունների նոր արժեքները, որոնք ցանկանում եք անիմացիայի ենթարկել: Իսկ երկրորդ պարամետրով՝ անիմացիայի կատարման ժամանակը:

Եկեք իրականացնենք այս մեթոդը հետևյալ HTML կոդի վրա.

html<button id="button">click me</button>
<div id="elem">text...</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;
}