Az animate metódus jQuery-ben

Az összes metódus, amelyeket az előző leckékben megvizsgáltunk, némileg korlátozottak - pontosan azt teszik, amire készültek. Ha nagyobb felügyeletre van szüksége az animáció felett - használja az univerzális animate metódust.

Első paraméterként ez a metódus egy objektumot fogad, amelyben meg kell adnia azon CSS tulajdonságok új értékeit, amelyeket animálni szeretne. A második paraméter pedig az animáció végrehajtási ideje.

Végezzük el ezt a metódust a következő HTML kódon:

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

Legyen a CSS így:

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

Tegyük fel, hogy a gomb megnyomásakor az elem a következő méretekre zsugorodik: magasság - 50px, szélesség - 100px:

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

Ha az értéket ilyen formátumban adjuk meg height: '+=50', akkor az animáció a következőképpen fog működni: az aktuális magassági értékhez hozzáadódik 50px (esetünkben) és az elem finoman animálódik az új értékre. Nézzük meg a példán:

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

Az animate metódus részletesebb leírását lásd a jQuery kézikönyvében.

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

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