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 дивіне басқан кезде оның ені 200px дейін 1100мс уақыт ішінде ұлғаюы үшін жасаңыз.

Бірінші тапсырманың версткасын қолданыңыз. #block дивіне әр басқан сайын оның ені 200px ұлғаюы және әрбір осындай ұлғаю 900px уақыт ішінде орындалуы үшін жасаңыз.

Бірінші тапсырманың версткасын қолданыңыз. #block дивіне әр басқан сайын оның ені мен биіктігі 100px ұлғаюы және әрбір осындай ұлғаю 950px уақыт ішінде орындалуы үшін жасаңыз.

Бірінші тапсырманың версткасын қолданыңыз. #block дивіне әр басқан сайын, ол 100px оңға жылжуы және әрбір осындай жылжу 700px уақыт ішінде орындалуы үшін жасаңыз.