Metoda animate w jQuery

Wszystkie metody, które omawialiśmy w poprzednich lekcjach, są w pewnym stopniu ograniczone - robią dokładnie to, do czego zostały stworzone. Jeśli potrzebujesz większej kontroli nad animacją - użyj uniwersalnej metody animate.

Pierwszym parametrem metoda ta przyjmuje obiekt, w którym należy ustawić nowe wartości właściwości CSS, które chcesz animować. A drugim parametrem - czas trwania animacji.

Zaimplementujmy tę metodę na następującym kodzie HTML:

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

Niech CSS wygląda tak:

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

Sprawmy, aby po kliknięciu przycisku element zmniejszył się do następujących rozmiarów: wysokość - 50px, szerokość - 100px:

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

Jeśli podasz wartość w takim formacie height: '+=50', to animacja będzie działać następująco: do bieżącej wartości wysokości zostanie dodane 50px (w naszym przypadku) i element zostanie płynnie animowany do nowej wartości. Spójrzmy na przykład:

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

Więcej o metodzie animate znajdziesz w podręczniku jQuery.

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

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