Manuale jQuery

Il metodo animate() esegue un'animazione personalizzata di un insieme di proprietà CSS .

Serve in sostanza per cambiare gradualmente delle proprietà CSS in modo da ottenere un effetto animato.

Solo i valori numerici possono essere animati.

Sintassi

(selector).animate({styles},speed,easing,callback)

• Styles: gli stili che devono essere animati. Possiamo animare i seguenti stili
• • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent
• Speed: Facoltativo. Specifica la velocità dell'animazione. Il valore di default è 400 millisecondi. Valori ammessi:
• • N° millisecondi
  • "slow"
  • "fast"
• Easing: Specifica la velocità dell'elemento in diversi punti dell'animazione. Valori ammessi:
• • " Swing" - si muove più lentamente all'inizio e alla fine, e più velocemente nel mezzo
  • " Lineare" - muove a velocità costante
• Callback: opzionale, una funzione che può essere lanciata alla fine dell’animazione.

Esempio

<script>
$(document).ready(function(){
    $("div").click(function(){
        $("div").animate({height: "300px"});
        $("div").animate({width:  "300px"});
    });
});
</script>
<div  style="height:100px;width:100px;border:1px solid red"></div>

Esempio con callback

<script>
$(document).ready(function(){
	$("div").click(function(){
		startAnimation();
	function  startAnimation(){
		$("div").animate({height: "300px"});
		$("div").animate({width: "300px"});
		$("div").animate({width: 100, height: 100}, "slow",  startAnimation);
		}
	});
});
</script>
<div style="width:100px;height:100px;border:1px  solid red;"></div>