Il metodo animate in jQuery

Tutti i metodi che abbiamo analizzato nelle lezioni precedenti sono in qualche modo limitati - fanno esattamente ciò per cui sono stati creati. Se hai bisogno di un maggiore controllo sull'animazione - usa il metodo universale animate.

Come primo parametro, questo metodo accetta un oggetto, in cui dovresti impostare i nuovi valori delle proprietà CSS che desideri animare. E come secondo parametro - il tempo di esecuzione dell'animazione.

Implementiamo questo metodo sul seguente codice HTML:

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

Lascia che il CSS appaia così:

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

Facciamo in modo che quando si clicca sul pulsante l'elemento si riduca alle seguenti dimensioni: altezza - 50px, larghezza - 100px:

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

Se specifichi il valore in questo formato height: '+=50', l'animazione funzionerà così: al valore corrente dell'altezza verrà aggiunto 50px (nel nostro caso) e l'elemento sarà animato in modo fluido fino al nuovo valore. Vediamo con un esempio:

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

Per maggiori dettagli sul metodo animate, consulta il manuale jQuery.

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

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