jQuery да animate методи

Аввалги дарсларда кўрган барча методиларимиз бир оз чекланган - улар ўзи яратилган мақсад учунгина ишлаяди. Агар сизга анимация устида кўпроқ назорат керак бўлса - универсал animate методидан фойдаланинг.

Бу метод биринчи параметр сифатида сиз анимация қилмоқчи бўлган CSS хусусиятларининг янги қийматларини белгилашингиз керак бўлган объектни қабул қилади. Иккинчи параметр сифатида эса анимациянинг бажариш вақтини белгилайсиз.

Келгина, бу методини куйидаги HTML кодда амалга оширамиз:

<button id="button">менга бос</button>
<div id="elem">матн...</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 ид ли дивга босганда унинг эни 1100мс ичида 200px гача ошишини таъминланг.

Биринчи вазифадаги ишлов беришдан фойдаланинг. #block ид ли дивга ҳар босганда унинг эни 200px га ошишини ва ҳар бир бундай ошиш 900px давомида амалга ошишини таъминланг.

Биринчи вазифадаги ишлов беришдан фойдаланинг. #block ид ли дивга ҳар босганда унинг эни ва баландлиги 100px га ошишини ва ҳар бир бундай ошиш 950px давомида амалга ошишини таъминланг.

Биринчи вазифадаги ишлов беришдан фойдаланинг. #block ид ли дивга ҳар босганда унинг 100px ҳар томонга ўнгга жойлашишини ва ҳар бир бундай жойланиш 700px давомида амалга ошишини таъминланг.