Metoda animate në jQuery

Të gjitha metodat që kemi shqyrtuar në mësimet e mëparshme, janë disi të kufizuara - ato bëjnë pikërisht atë për çfarë janë krijuar. Nëse keni nevojë për më shumë kontroll mbi animacionin - përdorni metodën universale animate.

Si parametër të parë kjo metodë pranon një objekt, në të cilin duhet të vendosni vlerat e reja të vetive CSS që dëshironi të animoni. Dhe si parametër të dytë - kohën e ekzekutimit të animacionit.

Le ta implementojmë këtë metodë në kodin HTML vijues:

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

Le të duket CSS kështu:

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

Le ta bëjmë që me klikim në buton, elementi të ngushtohet në përmasat vijuese: lartësia - 50px, gjerësia - 100px:

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

Nëse specifikoni vlerën në këtë format height: '+=50', atëherë animacioni do të funksionojë kështu: vlerës aktuale të lartësisë do t'i shtohet 50px (në rastin tonë) dhe elementi do të animohet gradualisht në vlerën e re. Le ta shohim me një shembull:

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

Për më shumë detaje rreth metodës animate, shikoni drejtorinë e jQuery.

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

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