Метод animate у jQuery-у
Све методе које смо разматрали у претходним
часовима су донекле ограничене - оне раде управо
оно за шта су креиране. Ако вам треба више
контроле над анимацијом - користите универзални
метод 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.
Постоји такав изглед:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Направите да при клику на div са
#block његова ширина порасне до
200px за 1100ms.
Користите изглед из првог задатка. Направите
да при сваком клику
на div са #block његова ширина
порасте за 200px и свако
такво повећање се дешава за
900ms.
Користите изглед из првог задатка. Направите
да при сваком клику
на div са #block његова ширина и
висина порасту за 100px и
свако такво повећање се дешава за
950ms.
Користите изглед из првог задатка. Направите
да при сваком клику
на div са #block, он се помери
удесно за 100px и свако
такво померање се дешава за
700ms.