Metoden animate i jQuery

Alla metoder som vi gick igenom i de tidigare lektionerna är något begränsade - de gör exakt det de är skapade för. Om du behöver mer kontroll över animationen - använd den universella metoden animate.

Den första parametern för denna metod tar ett objekt, där du ska ange de nya värdena för CSS -egenskaper som du vill animera. Och den andra parametern - tiden för animationens utförande.

Låt oss implementera denna metod på följande HTML-kod:

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

Låt CSS se ut så här:

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

Låt oss göra så att när knappen klickas komprimeras elementet till följande dimensioner: höjd - 50px, bredd - 100px:

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

Om du anger värdet i formatet height: '+=50', kommer animationen att fungera så här: till elementets nuvarande höjd kommer att läggas till 50px (i vårt fall) och elementet kommer att animeras mjukt till det nya värdet. Låt oss titta på ett exempel:

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

För mer information om metoden animate, se jQuery-referensguiden.

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

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