jQuery-ի animate մեթոդը

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

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

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

<button id="button">click me</button>
<div id="elem">text...</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 id-ով դիվի վրա սեղղելիս նրա լայնությունը մեծանա մինչև 200px 1100մվ-ում:

Օգտագործեք առաջին առաջադրանքի վերստը: Անեք այնպես, որ ամեն անգամ սեղղելիս #block id-ով դիվի վրա, նրա լայնությունը մեծանա 200px-ով և ամեն այդպիսի մեծացում տեղի ունենա 900մվ-ում:

Օգտագործեք առաջին առաջադրանքի վերստը: Անեք այնպես, որ ամեն անգամ սեղղելիս #block id-ով դիվի վրա, նրա լայնությունն ու բարձրությունը մեծանան 100px-ով և ամեն այդպիսի մեծացում տեղի ունենա 950մվ-ում:

Օգտագործեք առաջին առաջադրանքի վերստը: Անեք այնպես, որ ամեն անգամ սեղղելիս #block id-ով դիվի վրա, նա տեղափոխվի աջ 100px-ով և ամեն այդպիսի տեղափոխում տեղի ունենա 700մվ-ում: