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 маалымат китебинде караңыз.
Мынай верстка бар:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
#block дивине басканда анын туурасы 1100мс ичинде 200px чейин көбөйүшүн жасангыз.
Биринчи тапшырманын версткасын колдонуңуз. #block дивине ар бир жолу басканда анын туурасы 900px ичинде 200px көбөйүшүн, жана ар бир ушундай көбөйүү 900px ичинде болушун жасангыз.
Биринчи тапшырманын версткасын колдонуңуз. #block дивине ар бир жолу басканда анын туурасы жана бийиктиги 950px ичинде 100px көбөйүшүн, жана ар бир ушундай көбөйүү 950px ичинде болушун жасангыз.
Биринчи тапшырманын версткасын колдонуңуз. #block дивине ар бир жолу басканда, ал 700px ичинде 100px оңго жылышып, жана ар бир ушундай жылышуу 700px ичинде болушун жасангыз.
