Metoda animate u jQuery-u

Sve metode koje smo razmatrali u prethodnim lekcijama su donekle ograničene - one rade upravo ono za šta su kreirane. Ako vam je potrebno više kontrole nad animacijom - koristite univerzalnu metodu animate.

Kao prvi parametar ova metoda prihvata objekat, u kojem treba da postavite nove vrednosti CSS svojstava koja želite da animirate. A kao drugi parametar - vreme trajanja animacije.

Hajde da implementiramo ovu metodu na sledećem HTML kodu:

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

Neka CSS izgleda ovako:

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

Hajde da uradimo da se pri kliku na dugme element skupi na sledeće dimenzije: visina - 50px, širina - 100px:

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

Ako se vrednost navede u ovom formatu height: '+=50', onda će animacija raditi ovako: na trenutnu vrednost visine biće dodato 50px (u našem slučaju) i element će se postepeno animirati do nove vrednosti. Pogledajmo na primeru:

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

Detaljnije o metodu animate pogledajte u priručniku jQuery.

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

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