Metoden animate i jQuery

Alle de metoder, som vi gennemgik i de foregående lektioner, er noget begrænsede - de gør præcis det, de er skabt til. Hvis du har brug for mere kontrol over animationen - brug den universelle metode animate.

Som første parameter accepterer denne metode et objekt, hvor du skal angive de nye værdier for CSS egenskaber, som du ønsker at animere. Og som anden parameter - udførelsestiden for animationen.

Lad os implementere denne metode på følgende HTML-kode:

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

Lad CSS se sådan ud:

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

Lad os gøre så, at ved klik på knappen skrumper elementet til følgende størrelser: højde - 50px, bredde - 100px:

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

Hvis du angiver værdien i dette format height: '+=50', så vil animationen fungere sådan: til den nuværende højdeværdi vil der blive lagt 50px (i vores tilfælde) og elementet vil blive animeret glat til den nye værdi. Lad os se et eksempel:

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

Se mere om metoden animate i jQuery-referencemanualen.

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

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