jQuery:n animate-metodi

Kaikki menetelmät, joita tarkastelimme edellisissä oppitunneissa, ovat hieman rajoittuneita - ne tekevät tarkalleen sitä, mitä varten ne on luotu. Jos tarvitset enemmän valvontaa animaation suhteen - käytä yleismaailmallista animate-metodia.

Ensimmäisenä parametrina tämä metodi ottaa vastaan objektin, jossa tulee asettaa uudet CSS-ominaisuuksien arvot, jotka haluat animoida. Ja toisena parametrina - animaation suoritusajan.

Toteutetaan tämä metodi seuraavalla HTML-koodilla:

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

Olkoon CSS tällainen:

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

Tehdään niin, että napin painalluksella elementti kutistuu seuraaviin kokoihin: korkeus - 50px, leveys - 100px:

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

Jos määrität arvon tässä muodossa height: '+=50', niin animaatio toimii näin: nykyiseen korkeusarvoon lisätään 50px (meidän tapauksessamme) ja elementti animoituu sulavasti uuteen arvoon. Katsotaan esimerkkiä:

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

Katso tarkemmat tiedot animate-metodista jQueryn viitekirjasta.

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

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