jQuery-de animate metodu

Biz öňki sapaklarda öwrenen ähli metodlar birnäçe çäklendirilen - olar ýöne döredilen maksat üçin edilýär. Eger size animasiýa üstünde has köp dolandyryş gerek bolsa - ähliumumy animate metodyny ulanyň.

Bu metod birinji parametr hökmünde, siziň animirlemek isleýän CSS aýratynlyklarynyň täze bahalaryny bellemeli boljak nesne kabul edýär. Ikinji parametr hökmünde bolsa animasiýanyň ýerine ýetirilýän wagtyny.

Geliň bu metodu aşakdaky HTML kodynda amala aşyralyň:

<button id="button">click me</button>
<div id="elem">text...</div>

CSS şeýle görünsin:

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

Geliň düwmä basylanda element şu ölçeglere çenli gysylýan etdireliň: beýikligi - 50px, ini - 100px:

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

Eger bahany şu formatda görkezseňiz height: '+=50', onda animasiýa şeýle işler: häzirki beýiklik bahasyna 50px (biziň ýagdaýymyzda) goşular we element täze baha çenli üýşýän animasiýa ediler. Mysal üçin seredeliň:

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

animate metodu barada giňişleýin maglumat üçin jQuery gollanmasyna serediň.

animate

Şeýle sazlamak bar:

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

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

Şeýle ediň, #block diwine basylanda onuň ini 200px çenli 1100ms dowamynda artan bolsun.

Birinji mesele ýaly sazlamany ulanyň. Şeýle ediň, #block diwiniň her basylmagynda onuň ini 200px artan we her bir şeýle artma 900ms dowamynda ýerine ýetirilen bolsun.

Birinji mesele ýaly sazlamany ulanyň. Şeýle ediň, #block diwiniň her basylmagynda onuň ini we beýikligi 100px artan we her bir şeýle artma 950ms dowamynda ýerine ýetirilen bolsun.

Birinji mesele ýaly sazlamany ulanyň. Şeýle ediň, #block diwiniň her basylmagynda, ol sag tarapa 100px göçürilen we her bir şeýle göçürmek 700ms dowamynda ýerine ýetirilen bolsun.