Metóda animate v jQuery

Všetky metódy, ktoré sme rozoberali v predchádzajúcich lekciách, sú trochu obmedzené - robia presne to, na čo boli vytvorené. Ak potrebujete väčšiu kontrolu nad animáciou - použite univerzálnu metódu animate.

Prvým parametrom táto metóda prijíma objekt, v ktorom by ste mali nastaviť nové hodnoty CSS vlastností, ktoré chcete animovať. A druhým parametrom - čas trvania animácie.

Poďme implementovať túto metódu na nasledujúcom HTML kóde:

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

Nech CSS vyzerá takto:

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

Urobme tak, aby sa po kliknutí na tlačidlo element zmenšil na nasledujúce rozmery: výška - 50px, šírka - 100px:

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

Ak zadáte hodnotu v takomto formáte height: '+=50', animácia bude fungovať takto: k aktuálnej hodnote výšky sa pripočíta 50px (v našom prípade) a element bude plynule animovaný na novú hodnotu. Pozrime sa na príklad:

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

Viac o metóde animate nájdete v príručke jQuery.

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

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